www.webdeveloper.com
Results 1 to 5 of 5

Thread: js calculate multiple textboxes

  1. #1
    Join Date
    May 2009
    Posts
    1

    js calculate multiple textboxes

    Hi all,
    I have a javascript that takes values of textboxes and calculates them out. What I need to do is tweak my script so I can use multiple "products". I was thinking of appending a unique string in the beginning of the name/id of each textbox then using match expression or preg (??? not sure if they are correct terms) to have the script find the unique sets and calculate them accordingly.
    ie.
    set1= QTY11_somename * PRICE11_somename
    set2= QTY5999_somename * PRICE5999_somename
    set3=QTYd_somename * PRICEd_somename
    then have the script take the sum of all of the sets to calculate the totals...
    In my script so far, the names are hard coded (only 1 set). I need multiple sets with 1 set of totals... see my example:

    <script type="text/javascript">
    onload = function(){
    document.getElementById("calc").onclick = function(){
    var form = this.form;
    form.subtotal.value = (form.qty.value * form.price.value).toFixed(2);
    form.tax.value = (form.subtotal.value * form.taxrate.value).toFixed(2);
    form.total.value = ((form.qty.value * form.price.value) + (form.subtotal.value * form.taxrate.value)).toFixed(2);
    }
    }
    </script>

    <form>
    Quantity: <input name='qty' /><br>
    Price: <input name='price' /><br>
    Tax Rate: <input name="taxrate" value="0.0825"/><br>
    Subotal: <input name="subtotal" readonly="readonly" /><br>
    Tax: <input name="tax" readonly="readonly" /><br>
    Total: <input name="total" readonly="readonly" /><br>
    <input type="button" value="Calculate" id="calc" />
    </form>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Could be something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function setEvent(){
    var but, i=1;
    	while(but=document.getElementById('calc_'+(i++))){
    	but.onclick=calculate
    	}
    }
    function calculate(){
    var f=this.form, grandtotV=0, j=1, i=1, but;
    while(but=document.getElementById('calc_'+(j++))){
    	var oQty=f['qty_'+i];
    	var oPrice=f['price_'+i];
    	var oTaxrate=f['taxrate_'+i];
    	var oSubtotal=f['subtotal_'+i];
    	var oTax=f['tax_'+i];
    	var oTotal=f['total_'+i];
    	i++;
    	var subV=Number(oQty.value)*Number(oPrice.value);
    	var taxV=subV*Number(oTaxrate.value);
    	var totV=subV+subV*Number(oTaxrate.value);
    	grandtotV+=totV;
    
    	oSubtotal.value=subV==0?'':subV.toFixed(2);
    	oTax.value=taxV==0?'':taxV.toFixed(2);
    	oTotal.value=totV==0?'':totV.toFixed(2);
    }
    f['gradtotal'].value=grandtotV.toFixed(2);
    }
    
    onload=setEvent
    </script>
    
    </head>
    <body>
    <form action="">
    <div>
    Quantity: <input type="text" name='qty_1'><br>
    Price: <input type="text" name='price_1'><br>
    Tax Rate: <input type="text" name="taxrate_1" value="0.0825"/><br>
    Subotal: <input type="text" name="subtotal_1" readonly="readonly"><br>
    Tax: <input type="text" name="tax_1" readonly="readonly"><br>
    Total: <input type="text" name="total_1" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_1">
    </div>
    <div>
    Quantity: <input type="text" name='qty_2'><br>
    Price: <input type="text" name='price_2'><br>
    Tax Rate: <input type="text" name="taxrate_2" value="0.0825"/><br>
    Subotal: <input type="text" name="subtotal_2" readonly="readonly"><br>
    Tax: <input type="text" name="tax_2" readonly="readonly"><br>
    Total: <input type="text" name="total_2" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_2">
    </div>
    <div>
    Quantity: <input type="text" name='qty_3'><br>
    Price: <input type="text" name='price_3'><br>
    Tax Rate: <input type="text" name="taxrate_3" value="0.0825"/><br>
    Subotal: <input type="text" name="subtotal_3" readonly="readonly"><br>
    Tax: <input type="text" name="tax_3" readonly="readonly"><br>
    Total: <input type="text" name="total_3" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_3">
    </div>
    Grand total:<input type="text" name="gradtotal" readonly="readonly">
    </form> 
    </body>
    </html>

  3. #3
    Join Date
    Jul 2006
    Posts
    6
    Thank you for your reply. That is really close. I can't have a total and tax for each set. I need to have a tax_total, a sub_total (total without tax) then a grand_total (with tax) once at the end. If you have any more suggestions, I would be happy to see them. I am going to play with your code and see what I can come up with myself also... Thank you!

  4. #4
    Join Date
    Jul 2006
    Posts
    6
    something more like this (even though "gtotal" is not working for some reason and I cannot have the <div> set forced to be sequential):

    <script type="text/javascript">
    function setEvent(){
    var but, i=1;
    while(but=document.getElementById('calc_'+(i++))){
    but.onclick=calculate
    }
    }
    function calculate(){
    var f=this.form, grandtotV=0, j=1, i=1, but;
    while(but=document.getElementById('calc_'+(j++))){
    var oQty=f['qty_'+i];
    var oPrice=f['price_'+i];
    // var oTaxrate=f['taxrate_'+i];
    var oSubtotal=f['subtotal_'+i];
    // var oTax=f['tax_'+i];
    var oTotal=f['total_'+i];
    i++;
    var subV=Number(oQty.value)*Number(oPrice.value);
    // var taxV=subV*Number(oTaxrate.value);
    // var totV=subV+subV*Number(oTaxrate.value);
    var totV=subV;
    grandtotV+=totV;

    oSubtotal.value=subV==0?'':subV.toFixed(2);
    // oTax.value=taxV==0?'':taxV.toFixed(2);
    oTotal.value=totV==0?'':totV.toFixed(2);
    }
    f['partstotal'].value=grandtotV.toFixed(2);
    f['tax'].value = (f['partstotal'].value * f['taxrate'].value).toFixed(2);
    f['gtotal'].value = ((f['partstotal'].value * f['taxrate'].value) + f['partstotal'].value).toFixed(2);
    }

    onload=setEvent
    </script>

    <form action="">
    <div>
    Quantity: <input type="text" name='qty_1'><br>
    Price: <input type="text" name='price_1'><br>
    Subotal: <input type="text" name="subtotal_1" readonly="readonly"><br>
    Tax: <input type="text" name="tax_1" readonly="readonly"><br>
    Total: <input type="text" name="total_1" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_1">
    </div>
    <div>
    Quantity: <input type="text" name='qty_99'><br>
    Price: <input type="text" name='price_99'><br>
    Subotal: <input type="text" name="subtotal_99" readonly="readonly"><br>
    Tax: <input type="text" name="tax_99" readonly="readonly"><br>
    Total: <input type="text" name="total_99" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_99">
    </div>
    <div>
    Quantity: <input type="text" name='qty_3'><br>
    Price: <input type="text" name='price_3'><br>
    Subotal: <input type="text" name="subtotal_3" readonly="readonly"><br>
    Tax: <input type="text" name="tax_3" readonly="readonly"><br>
    Total: <input type="text" name="total_3" readonly="readonly"><br>
    <input type="button" value="Calculate" id="calc_3">
    </div>
    Tax Rate: <input type="text" name="taxrate" value="0.0825">
    <br>Tax: <input type="text" name="tax" readonly="readonly">
    <br>Parts Total: <input type="text" name="partstotal" readonly="readonly">
    <br>Grand Total:<input type="text" name="gtotal" readonly="readonly">
    </form>

  5. #5
    Join Date
    Jul 2006
    Posts
    6
    Kor, thank you for your help!!! I am getting there with your code. THis is more of what I wanted (see code). Is there any way to remove the "calculate" button for each div and just use onblur (not sure if using correct termonology) instead...:

    <script type="text/javascript">
    function setEvent(){
    var but, i=1;
    while(but=document.getElementById('calc_'+(i++))){
    but.onclick=calculate
    }
    }
    function calculate(){
    var f=this.form, grandtotV=0, j=1, i=1, but;
    while(but=document.getElementById('calc_'+(j++))){
    var oQty=f['qty_'+i];
    var oPrice=f['price_'+i];
    // var oTaxrate=f['taxrate_'+i];
    // var oSubtotal=f['subtotal_'+i];
    // var oTax=f['tax_'+i];
    // var oTotal=f['total_'+i];
    i++;
    var subV=Number(oQty.value)*Number(oPrice.value);
    // var taxV=subV*Number(oTaxrate.value);
    // var totV=subV+subV*Number(oTaxrate.value);
    var totV=subV;
    grandtotV+=totV;

    // oSubtotal.value=subV==0?'':subV.toFixed(2);
    // oTax.value=taxV==0?'':taxV.toFixed(2);
    // oTotal.value=totV==0?'':totV.toFixed(2);

    }
    f['partstotal'].value=grandtotV.toFixed(2);
    f['tax'].value = (f['partstotal'].value * f['taxrate'].value).toFixed(2);
    f['gtotal'].value = ((f['partstotal'].value * f['taxrate'].value) + grandtotV).toFixed(2);
    }

    onload=setEvent
    </script>

    <form action="">
    <div>
    Quantity: <input type="text" name='qty_1'><br>
    Price: <input type="text" name='price_1'><br>
    <input type="button" value="Calculate" id="calc_1">
    </div>
    <div>
    Quantity: <input type="text" name='qty_2'><br>
    Price: <input type="text" name='price_2'><br>
    <input type="button" value="Calculate" id="calc_2">
    </div>
    <div>
    Quantity: <input type="text" name='qty_3'><br>
    Price: <input type="text" name='price_3'><br>
    <input type="button" value="Calculate" id="calc_3">
    </div>
    Tax Rate: <input type="text" name="taxrate" value="0.0825">
    <br>Tax: <input type="text" name="tax" readonly="readonly">
    <br>Parts Total: <input type="text" name="partstotal" readonly="readonly">
    <br>Grand Total:<input type="text" name="gtotal" readonly="readonly">
    </form>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles