Add calculate total and display to order form

[idaryl]

I have this form I've cobbled together from found sources and experimenting - its a page count copy calculator. Each page is worth 5¢, and the user enters the amount of pages to copy (first field) and the amount of copies needed (2nd field) *this may also need to be a separate price - something like padding the default price by a few cents each.

On submit, the page count value is multiplied by the pagecopy field value. A result message is displayed.

What I'm out of my league on is; if the pages have a set price of .5¢ (I assume that would be a var) can the page count price also be multiplied by the page copy to display the total page count price amount? EG:

A page count of 23. Multiplied by 4 copies,
is a total page count of 92 pages...
Price is $xx.xx

To make matters more interesting the client has added a variable where the "size" of the paper would effect the cost.

My code is here.........

<script>
function solve() {
 var pageprice_opt = document.getElementsByName("pageprice");
                var page_count = document.getElementById("pgct").value;
                var copy_amt = document.getElementById("cpypg").value;

                if (page_count=="") {

                var msg = "<span class='warning'>How many pages?</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                } 
             else if (copy_amt=="") {
                 var msg = "<span class='warning'>How many copies?</span>";
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                    }

            if (pageprice_opt[0].checked == true) 
                product = parseInt(page_count) *parseInt(copy_amt);     
                results = "<span class='message'>A page count of " 
                    + page_count + ". Multiplied by " + copy_amt + " copies,<br>is a total page count of " + product +" pages...</span>";
                document.getElementById('msg').innerHTML = results;
                    return false;
                }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
                }

             function clear()
             {
            document.getElementById('msg').innerHTML = "";
            page_count="";
            copy_amt="";
            page_count.focus();
             }

             page_count.focus();
    </script

and on the page: 

    <div class="calccontainer">
    <form action="" method="POST">
         <label for="first_value">Amount of pages</label>
         <input type="text" name="page_count" id="pgct" size="5" autofocus>
         <br><br>
         <label for="second_value">Amount of copies</label>
        <input type="text" name="cpypg" id="cpypg" size="5">
        <input type="radio" name="pageprice" style="display:none;" onclick="reset_msg();" checked />

            <br><br>
            <input type="submit" value="Page Count" onclick="return solve();" />

            <input type="submit" value="Clear" onclick="return clear();" />
            <br><br>
<div id="msg"></div>
 </form>
 </div>

Is what I'm after doable? or am I just crazed :(

[pixelsoul]

So you're just wanting 0.05 * pages * copies then?

Sounds pretty easy and doable.

[idaryl]

Yes.....

but if I change the price (0.05) in the functions, then it should apply also.

for example: the owner may decide to change it from 5¢ to 7¢ or whatever - if the price is in a var then it could be changed at any time according to the clients needs.

[pixelsoul]

If you change it to 0.07 in that calculation, then it will apply. Maybe I'm confused about what your really asking here.

If the price of a single print is always the same, then yes I would store that in a variable and put that into your calculation.

If you do have prints that have different prices, then that obviously won't work, and you will need a way to store and reference the different prices for the different types of prints. If it's just a simple list that doesn't change much, you could store that into an array.

[idaryl]

Yes you are right, the price could be in an array (here's some thinking)
The selection could be based on an option drop so if the user selects, letter, then the price would be 5¢, or selects legal then its 7ç etc, etc

Then in the array the price could be changed at will - ***the price (depending on choice) will apply to the copies as well

<select name="pagestype">
    <option value="letter">Letter</option>
    <option value="legal">Legal</option>
    <option value="tabloid">Tabloid</option>
    <option value="poster">Poster</option>
  </select>

[diafol]

What about bulk discounts? Say 5c for less that 1000 copies, 4c for more. That sort of thing.

[idaryl]

That complicating it more - although I asked the client anyway and they say no - thanks for the interest and input.

[diafol]

OK, been watching this for a while, but little activity. Firstly, I'm assuming that this is part of a simple online calculator for a quote.

function getQuote(){
    var copies = parseInt(document.getElementById('copies').value);
    var pages = parseInt(document.getElementById('pages').value);
    var sizePrice = parseFloat(document.getElementById('sizeprice').value);
    var total = sizePrice * copies * pages;
    return total.toFixed(2);
}    

As in a fiddle: https://jsfiddle.net/360bwd3n/

[idaryl]

I have been watchingt as well, but I never know when someone enters anything (Im not notified) so I just look at this page on an ongoing infrequent way.... sorry, :(

Your fiddle creates an alert that if the user changes their mind the alert prompts you to prevent the page from creating more alerts, this would defeat the process, however you have shortened my long code down to a way smaller chunk and I am experimenting with adding a radio and a checkbox sampling to see if I can incorporate them. Following the methodology of your sample I may be able to copy/past additional amount to add to the final [ var total = sizePrice copies * pages; ]

I am also trying to get the result to echo under the input fields.....

Thanks so much for the input......

[idaryl]

I tried this

document.getElementById('showQuote').addEventListener('click', function(){ document.write(getQuote()); });

but it rewrites the page by replacing the form inputs with the results.....

also a checkbox (id sided) with a value of a 1,00 does not add to the var total using +sided... still working on it though

[idaryl]

I guess this is of no interest anymore.... :(

[diafol]

The alert was just an example
Ideally you'd write the total to a div container or an empty input. So the listener function, instead of doing an alert could do something like

document.getElementById('total').value = getQuote();