www.webdeveloper.com
Results 1 to 8 of 8

Thread: Adding form values for subtotal

  1. #1
    Join Date
    Nov 2013
    Posts
    6

    Adding form values for subtotal

    In my form I have multiple line items. In a line item, the total price is found by multiplying the quantity by unit price. This is working fine. Under the line items, however, is the subtotal, which is suppose to be the sum of all the line item total prices. The javascript I'm currently using for the subtotal is fine if only one line item is entered. However, when I enter a quantity in the second line item it just adds a zero to the subtotal. Then I enter the price in line item 2 and the total price of that line item is concatenated to the subtotal. The second issue is if I go back and change line item 1, the subtotal is updated to show only the value of line item 1 total price. I guess my question is, what is the best method for keeping a running subtotal when the line item total price is updated?

    The code I've used so far is below:

    Code:
    <script>// <![CDATA[
    function updateitem0() {
    document.form.itemsum0.value = (document.form.quantityx.value) * (document.form.unitprice0.value);
    document.form.subtotal.value = (document.form.itemsum0.value);
    }
    function updateitem1() {
    document.form.itemsum1.value = (document.form.quantity1.value) * (document.form.unitprice1.value);
    document.form.subtotal.value = (document.form.itemsum0.value + document.form.itemsum1.value);
    }
    // ]]></script>
    HTML Code:
    <h2>Requisition Form</h2>
    <form action="MPDF57/tester.php" method="post" target="_blank" name="form"><fieldset><legend>Section 1</legend>
    <p><label class="field" for="company_name">Name of Company: </label> <input id="company_name" class="textbox" name="company_name" type="text" /></p>
    <p><label class="field" for="address">Address: </label> <textarea id="address" cols="38" name="address" rows="2"></textarea></p>
    <p><label class="field" for="telephone">Telephone: </label> <input id="telephone" class="textbox" name="telephone" type="text" /></p>
    <p><label class="field" for="fax2">Fax: </label> <input id="fax2" class="textbox" name="fax2" type="text" /></p>
    <p><label class="field" for="website">Website: </label> <input id="website" class="textbox" name="website" type="text" /></p>
    </fieldset><br /><fieldset><legend>Section 2</legend>
    <table id="requisitionitems" border="0">
    <tbody>
    <tr><th class="width">Quanity</th><th class="width">item #</th><th class="width">Description</th><th class="width">Unit Price</th><th class="width">Total Price</th></tr>
    <tr>
    <td><input id="quantityx" class="quantitywidth" name="quantityx" type="text" onChange="updateitem0()"/></td>
    <td><input id="item0" class="itemwidth" name="item0" type="text" /></td>
    <td><textarea id="description0" cols="30" name="description0" rows="2"></textarea></td>
    <td><input id="unitprice0" class="unitpricewidth" name="unitprice0" type="text" onChange="updateitem0()"/></td>
    <td><input id="itemsum0" class="totalpricewidth" name="itemsum0" readonly="readonly" type="text"  /></td>
    </tr>
    <tr>
    <td><input id="quantity1" class="quantitywidth" name="quantity1" type="text" onChange="updateitem1()" /></td>
    <td><input id="item1" class="itemwidth" name="item1" type="text" /></td>
    <td><textarea id="description1" cols="30" name="description1" rows="2"></textarea></td>
    <td><input id="unitprice1" class="unitpricewidth" name="unitprice1" type="text" onChange="updateitem1()"/></td>
    <td><input id="itemsum1" class="totalpricewidth" name="itemsum1" readonly="readonly" type="text" /></td>
    </tr>
    <tr>
    <td><input id="quantity2" class="quantitywidth" name="quantity2" type="text" /></td>
    <td><input id="item2" class="itemwidth" name="item2" type="text" /></td>
    <td><textarea id="description2" cols="30" name="description2" rows="2"></textarea></td>
    <td><input id="unitprice2" class="unitpricewidth" name="unitprice2" type="text" /></td>
    <td><input id="totalprice2" class="totalpricewidth" name="totalprice2" type="text" /></td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td></td>
    <td><input id="subtotal" class="totalpricewidth" name="subtotal" type="text" readonly="readonly" /></td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td></td>
    <td><input id="shipping" class="totalpricewidth" name="shipping" type="text" /></td>
    </tr>
    </tbody>
    </table>
    </fieldset><br /><fieldset><legend>Section 3</legend>
    <p><label class="field" for="signature">Staff Member Signature: </label> <input id="fax" class="textbox" name="fax" type="text" /></p>
    </fieldset><br /><br />
    <p><input type="submit" value="Generate PDF" /></p>
    </form>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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>
    
    // <![CDATA[
    function updateitem(){
     var frm=document.forms[0],q,u,t=0,z0=0;
     for (;frm['quantity'+z0]&&frm['unitprice'+z0]&&frm['itemsum'+z0];z0++){
      q=frm['quantity'+z0].value;
      u=frm['unitprice'+z0].value;
      frm['itemsum'+z0].value=isFinite(q*u)?q*u:0;
      t+=isFinite(q*u)?q*u:0;
     }
     frm['subtotal']?frm['subtotal'].value=t:null;
    }
    // ]]></script>
    </head>
    
    <body>
    <h2>Requisition Form</h2>
    <form action="MPDF57/tester.php" method="post" target="_blank" name="form"><fieldset><legend>Section 1</legend>
    <p><label class="field" for="company_name">Name of Company: </label> <input id="company_name" class="textbox" name="company_name" type="text" /></p>
    <p><label class="field" for="address">Address: </label> <textarea id="address" cols="38" name="address" rows="2"></textarea></p>
    <p><label class="field" for="telephone">Telephone: </label> <input id="telephone" class="textbox" name="telephone" type="text" /></p>
    <p><label class="field" for="fax2">Fax: </label> <input id="fax2" class="textbox" name="fax2" type="text" /></p>
    <p><label class="field" for="website">Website: </label> <input id="website" class="textbox" name="website" type="text" /></p>
    </fieldset><br /><fieldset><legend>Section 2</legend>
    <table id="requisitionitems" border="0">
    <tbody>
    <tr><th class="width">Quanity</th><th class="width">item #</th><th class="width">Description</th><th class="width">Unit Price</th><th class="width">Total Price</th></tr>
    <tr>
    <td><input id="quantity0" class="quantitywidth" name="quantity0" type="text" onChange="updateitem()"/></td>
    <td><input id="item0" class="itemwidth" name="item0" type="text" /></td>
    <td><textarea id="description0" cols="30" name="description0" rows="2"></textarea></td>
    <td><input id="unitprice0" class="unitpricewidth" name="unitprice0" type="text" onChange="updateitem()"/></td>
    <td><input id="itemsum0" class="totalpricewidth" name="itemsum0" readonly="readonly" type="text"  /></td>
    </tr>
    <tr>
    <td><input id="quantity1" class="quantitywidth" name="quantity1" type="text" onChange="updateitem()" /></td>
    <td><input id="item1" class="itemwidth" name="item1" type="text" /></td>
    <td><textarea id="description1" cols="30" name="description1" rows="2"></textarea></td>
    <td><input id="unitprice1" class="unitpricewidth" name="unitprice1" type="text" onChange="updateitem()"/></td>
    <td><input id="itemsum1" class="totalpricewidth" name="itemsum1" readonly="readonly" type="text" /></td>
    </tr>
    <tr>
    <td><input id="quantity2" class="quantitywidth" name="quantity2" type="text" /></td>
    <td><input id="item2" class="itemwidth" name="item2" type="text" /></td>
    <td><textarea id="description2" cols="30" name="description2" rows="2"></textarea></td>
    <td><input id="unitprice2" class="unitpricewidth" name="unitprice2" type="text" /></td>
    <td><input id="totalprice2" class="totalpricewidth" name="totalprice2" type="text" /></td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td></td>
    <td><input id="subtotal" class="totalpricewidth" name="subtotal" type="text" readonly="readonly" /></td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td></td>
    <td><input id="shipping" class="totalpricewidth" name="shipping" type="text" /></td>
    </tr>
    </tbody>
    </table>
    </fieldset><br /><fieldset><legend>Section 3</legend>
    <p><label class="field" for="signature">Staff Member Signature: </label> <input id="fax" class="textbox" name="fax" type="text" /></p>
    </fieldset><br /><br />
    <p><input type="submit" value="Generate PDF" /></p>
    </form>
    </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
    Nov 2013
    Posts
    6
    Thank you Vic. It worked beautifully, although I do not understand most of what you did. Last question I hope...

    The subtotal is then added to the shipping amount. I used

    function updatetotal(){
    document.form.total.value = document.form.subtotal.value + document.form.shipping.value;
    }

    But the value I see is simply a concatenated one. For example - Subtotal is 10, Shipping is 10 - the value in total reads 1010.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    function updatetotal(){
    document.form.total.value = document.form.subtotal.value*1 + document.form.shipping.value*1;
    }
    the string is converted to a number by multiplication
    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/

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    Also subtracting zero from the string value returns (casts) a numeric value.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    It should be noted that the function parseInt() is often misused to return a numeric value from a string, it is best employed where a string is returned like where it has 50px; and you need the 50 as a numeric.
    Code:
    str = "50px;";
    
    strValue = parseInt(str);
    
    alert(strValue);
    pops up an alert with 50 in it.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Nov 2013
    Posts
    6
    Great. Thanks a lot you two.

    Returning to Post #2 in this thread...how do I format the value in itemsum to have two decimals? I tried adding .toFixed to the script variable like this:

    frm['itemsum'+z0].value.toFixed(2)=isFinite(q*u)?q*u:0;

    without luck.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    Code:
      frm['itemsum'+z0].value=(isFinite(q*u)?q*u:0).toFixed(2);
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

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