/    Sign up×
Community /Pin to ProfileBookmark

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>
[/CODE]

[code=html]<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>[/code]

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@vwphillipsNov 30.2013 — [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>[/CODE]
Copy linkTweet thisAlerts:
@lyno1279authorDec 02.2013 — 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.
Copy linkTweet thisAlerts:
@vwphillipsDec 02.2013 — [CODE]function updatetotal(){
document.form.total.value = document.form.subtotal.value*1 + document.form.shipping.value*1;
}
[/CODE]


the string is converted to a number by multiplication
Copy linkTweet thisAlerts:
@rootDec 02.2013 — Also subtracting zero from the string value returns (casts) a numeric value.
Copy linkTweet thisAlerts:
@rootDec 02.2013 — 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);[/CODE]


pops up an alert with 50 in it.
Copy linkTweet thisAlerts:
@lyno1279authorDec 03.2013 — 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.
Copy linkTweet thisAlerts:
@rootDec 04.2013 — [CODE] frm['itemsum'+z0].value=(isFinite(q*u)?q*u:0).toFixed(2);[/CODE]
×

Success!

Help @lyno1279 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.31,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...