www.webdeveloper.com
Results 1 to 10 of 10

Thread: need to auto sum form

  1. #1
    Join Date
    May 2013
    Posts
    10

    need to auto sum form

    Ok so I'm about as green as they come when it comes to JavaScript so pardon my ignorance. I've searched on this for a couple weeks trying to figure it out on my own with no success so I'm seeking some assistance here.
    I have a form that has multiple input fields that I need to total up. Here is the form, http://jemtechnv.com/portal/beta/finish_ticket.php I know it looks jacked up but I'm working on it, so looking at the form you see I have a field named Qty and a field named Price. I need to multiply those together and populate the Ext field I then need to total up the Ext field and populate the Material Total field, I can total the Ext field currently as you can see if you enter a number in each box of the Ext field you will see the sum total in the Material Total box. My issue is not being able to get the Qty and the Price fields to total up and populate the Ext box. This is the code I'm using to sum up the Ext fields that is working:

    Code:
    function summate() {
            	var material_total=0
            	for (var i=1; i <= 5; i++) {
            		var id = "extended"+i;
            	    material_total = material_total + document.getElementById(id).value*1;
            	}
            	document.getElementById("material_total").value = material_total;
            }
    my only problem with this is if I have more than 5 fields it wont work unless I change < =5; to the number of fields.

    I also need to be able to multiply the rate by the hours and populate the total fields as well and you guessed it total all those up for the grand total as well. I'm not looking for someone to write an entire script for me I just need some assistance on finding a script to do what I need or some help with tweaking what I'm using. Thanks in advance!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function summate() {
            	var material_total=0,i=1,obj;
                while (document.getElementById('extended'+i)){
                  obj=document.getElementById('extended'+i);
                  obj.value=obj.value.replace(/\D/g,'')||0;
            	  material_total = material_total + obj.value*1;
                  i++;
                }
            	document.getElementById("material_total").value = material_total;
            }
    /*]]>*/
    </script>
    
    </head>
    <input id="extended1" value="1" />
    <input id="extended2" value="1" />
    <input id="extended3" value="1" />
    <input id="extended4" value="1" />
    <input id="extended5" value="1" />
    <input id="extended6" value="1" />
    <input id="extended7" value="1" />
    <input id="material_total" value="1" />
    
    <input type="button" name="" value="Test" onmouseup="summate()"/>
    <body>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2013
    Posts
    10
    Thanks for the reply vwphilips but I'm a bit lost, I replaced my code with what you posted and I get the same thing I had, I only get the values for the ext column to total up and populate the material total box. I can change the values in my script and have it total up one qty box and one price box and get it to populate the ext box but it add's and I need those fields multiplied and that's all I can get it to do. I can't seem to get more than one row to work.

  4. #4
    Join Date
    May 2013
    Posts
    10
    Basically this is what I am trying to accomplish, I have my script to sum up all the Ext column and auto populate that total in the Material total box what I can't figure out is how to write the code to take what is in the Qty box and Price box of row 1 and multiply it and auto populate the Ext box for row 1 then do the same for the Qty and Price boxes for the remaining rows and have the values of each rows Ext box auto populate the Material Total box. Can I use multiple 'while' statements with different .getElementById values?

  5. #5
    Join Date
    May 2013
    Posts
    10
    Answering my own issue it seems, but I'm stuck again.
    So here is what I have so far, I have managed to get the Qty and Price for each row to auto populate the Ext for the related row,
    so on row 1 I enter an amount for Qty and it populates the same number in the Ext box, I add a number to row 1 price and it adds that number to the Qty and changes the number in the row 1 Ext box. I can move on down to row 2,3, 4 and 5 with the same results. but my problem is that it's adding and I need it to multiply. here is my code:

    Code:
    function summate1() {
            	var extend1=0
            	for (var i=1; i <= 2; i++) {
            		var id = "1_value"+i;
            	    extend1 = extend1 + document.getElementById(id).value*1;
            	}
            	document.getElementById("extend1").value = extend1;
            }
            function summate2() {
            	var extend2=0
            	for (var i=1; i <= 2; i++) {
            		var id = "2_value"+i;
            	    extend2 = extend2 + document.getElementById(id).value*1;
            	}
            	document.getElementById("extend2").value = extend2;
            }
             function summate3() {
            	var extend3=0
            	for (var i=1; i <= 2; i++) {
            		var id = "3_value"+i;
            	    extend1 = extend1 + document.getElementById(id).value*1;
            	}
            	document.getElementById("extend3").value = extend1;
            }
            function summate4() {
            	var extend4=0
            	for (var i=1; i <= 2; i++) {
            		var id = "4_value"+i;
            	    extend2 = extend2 + document.getElementById(id).value*1;
            	}
            	document.getElementById("extend4").value = extend2;
            }
             function summate5() {
            	var extend5=0
            	for (var i=1; i <= 2; i++) {
            		var id = "5_value"+i;
            	    extend1 = extend1 + document.getElementById(id).value*1;
            	}
            	document.getElementById("extend5").value = extend1;
            
            }
    how do I make this multiply the value fields (qty x price)

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,678
    Code:
    <html>
    <style type="text/css">
    .auto-style1 {
    	text-align: center;
    }
    .auto-style3 {
    	text-align: right;
    	font-weight: normal;
    }
    </style>
    
    <head>
    <meta name="generator" content="PhpED Version 4.5 (Build 4513)">
    <script  type="text/javascript">
    
    function multiply(ip){
     var frm=ip.form,totals=frm['total'],t=0,z0=0;
     while (ip.nodeName.toUpperCase()!='TR'){
      ip=ip.parentNode;
     }
     ip=ip.getElementsByTagName('INPUT');
     ip[0].value=ip[0].value.replace(/\D/g,'')||0;
     ip[4].value=ip[4].value.replace(/\D/g,'')||0;
     ip[5].value=ip[0].value*ip[4].value;
     for (;z0<totals.length;z0++){
      totals[z0].value=totals[z0].value.replace(/\D/g,'')||0;
      t+=totals[z0].value*1;
     }
     frm['material_total'].value=t;
     frm['sales_tax'].value=t/10;
    }
    
    </script></head>
    <body style="background-color: #EEEEEE">
    <center>
    <form method="post" action="#"><h1 align="center" class="auto-style9">Field Ticket</h1>
    
    <table>
    <tr>
    	<td style="width: 40px" class="auto-style1">Qty</td>
    	<td style="width: 100px" class="auto-style1">Manufacture</td>
    	<td style="width: 95px" class="auto-style1">Part Number</td>
    	<td style="width: 200px" class="auto-style1">Description</td>
    	<td style="width: 50px" class="auto-style1">Price</td>
    	<td style="width: 50px" class="auto-style1">Ext</td>
    </tr>
    </table>
    
    <table>
    <tr>
    <td><input type="text" name="qty_1" id="1_value1" onkeyup="multiply(this)" style="width: 40px"></td>
    <td><input type="text" name="manuf_1" class="auto-style1" style="width: 100px"></td>
    <td><input type="text" name="part_number1" style="width: 95px"></td>
    <td><input type="text" name="part_description1" style="width: 200px"></td>
    <td><input  type="text" name="part_price1" id="1_value2" onkeyup="multiply(this)" style="width: 50px"></td>
    <td><input  type="text" name="total" id="extend1" style="width: 50px"></td>
    </tr>
    <tr>
    <td><input type="text" name="qty_1" id="2_value1" onkeyup="multiply(this)" style="width: 40px"></td>
    <td><input type="text" name="manuf_1" class="auto-style1" style="width: 100px"></td>
    <td><input type="text" name="part_number1" style="width: 95px"></td>
    <td><input type="text" name="part_description1" style="width: 200px"></td>
    <td><input  type="text" name="part_price1" id="2_value2" onkeyup="multiply(this)" style="width: 50px"></td>
    <td><input  type="text" name="total" id="extend2" style="width: 50px"></td>
    </tr>
    <tr>
    <td><input type="text" name="qty_1" id="3_value1" onkeyup="multiply(this)" style="width: 40px"></td>
    <td><input type="text" name="manuf_1" class="auto-style1" style="width: 100px"></td>
    <td><input type="text" name="part_number1" style="width: 95px"></td>
    <td><input type="text" name="part_description1" style="width: 200px"></td>
    <td><input  type="text" name="part_price1" id="3_value2" onkeyup="multiply(this)" style="width: 50px"></td>
    <td><input  type="text" name="total" id="extend3" style="width: 50px"></td>
    </tr>
    <tr>
    <td><input type="text" name="qty_1" id="4_value1" onkeyup="multiply(this)" style="width: 40px"></td>
    <td><input type="text" name="manuf_1" class="auto-style1" style="width: 100px"></td>
    <td><input type="text" name="part_number1" style="width: 95px"></td>
    <td><input type="text" name="part_description1" style="width: 200px"></td>
    <td><input  type="text" name="part_price1" id="4_value2" onkeyup="multiply(this)" style="width: 50px"></td>
    <td><input  type="text" name="total" id="extend4" style="width: 50px"></td>
    </tr>
    <tr>
    <td style="height: 26px"><input type="text" name="qty_1" id="5_value1" onkeyup="multiply(this)" style="width: 40px"></td>
    <td style="height: 26px"><input type="text" name="manuf_1" class="auto-style1" style="width: 100px"></td>
    <td style="height: 26px"><input type="text" name="part_number1" style="width: 95px"></td>
    <td style="height: 26px"><input type="text" name="part_description1" style="width: 200px"></td>
    <td style="height: 26px"><input  type="text" name="part_price1" id="5_value2" onkeyup="multiply(this)" style="width: 50px"></td>
    <td style="height: 26px"><input  type="text" name="total" id="extend5" style="width: 50px"></td>
    </tr>
    </table>
    
    <table>
    <td style="width: 40px; height: 26px;">
    <td class="auto-style3" style="width: 457px; height: 26px;">Material Total</td>
    <td style="height: 26px"><input  type="text" name="material_total" id="mattotal" style="width: 50px"></td>
    </table>
    
    <table>
    <td style="width: 40px"><td class="auto-style3" style="width: 457px">Sales Tax</td>
    <td><input  type="text" name="sales_tax" id="sales_tax" style="width: 50px"></td>
    </table>
    
    <table>
    <td style="width: 40px"><td class="auto-style3" style="width: 457px">Shipping</td>
    <td><input  type="text" name="ship_cost" id="shipping" style="width: 50px"></td>
    </table>
    
    
    </form>
    </center>
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    May 2013
    Posts
    10
    Thank you vwphillips that works great with one exception, I can't enter decimal points in the price field and don't have a clue with this code how to change that.

  8. #8
    Join Date
    May 2013
    Posts
    10
    one other thing as well, I changed the last line of code for sales tax from .value=t/10 to .value=t*8.10 to get the correct sales tax rate and it gives the correct rate but too many decimal points over. instead of 5.83 it's 583.199

  9. #9
    Join Date
    May 2013
    Posts
    10
    Ok I've got it figured out thanks for your help vwphillips!

  10. #10
    Join Date
    Nov 2012
    Location
    Emirates
    Posts
    6
    Nice! Just wanted to respond. I thoroughly loved your post. Keep up the great work on www.webdeveloper.com .
    try out escort service dubai on http://dubaiescortzone.com - you'll never forget it

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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