Javascript Form Calculations

[bspahr75]

I have the following form:
http://www.htc.net/~jspahr/form1.htm


I want to have the user enter the total items sold and then
have the grand total below it calculated automatically and
then have the final totals at the right generated.


I have managed to get the top row working the way I want, but
can't figure out how to get the total items sold
to multiply by the cost of the item.

Anyone have a suggestion or a link?
Thanks.

[ShriekForth]

You could make your life a lot easier by making the txtGrandA a numeric, txtGrand1. Then add a hidden field for each of the costs, txtCost1. Now you have 3 input types that are all related by the number and add a function like this

<script>
function itemTotal(item){
doc = "document.frmOrder";
eval ("document.frmOrder.txtGrand"+item+".value = document.frmOrder.txtCost" + item +".value * document.frmOrder.txtSold"+ item + ".value");

}
</script>

<input type="text" name="txtSold1" size="9" value="" onBlur="calculate(this.form); itemTotal('1')">
<input type="text" name="txtCost1" value="4.00">
<input type="text" name="txtGrand1" size="9" value="">

number each item accordingly, and this will run your calculate() across the row, and then run iitemTotal() on the column. Formatting might not be what you are looking for. This script could help you out there.


<script language="JavaScript" type="text/javascript">
// Strips all non numberic characters execpt for the period
function cleanString(s) {
var ch;
var sout = "";
for (var i = 0; i < s.length; i++) {
ch = s.charAt(i);
if ((ch >= "0") && (ch <= "9") || (ch == ".")) {
sout += ch;
}
}
return sout;
}

function roundDollar(amount) {
var s = "";
var decimal;
dollar = amount.indexOf("$");
if (dollar == 0){ // check for $
var dollars = amount.split("$"); // strip it off before converting
amount = dollars[1];
}
amount = parseFloat(amount);
if (!(isNaN(amount))) { // round to nearest cent
amount = Math.round(amount * 100);
amount = amount / 100;
s = new String(amount); // format the output
decimal = s.indexOf(".");
if (decimal == -1) { // whole number
s+= ".00";
}
else {
if (decimal == (s.length - 2)) { // needs a trailing zero
s+= "0";
}
}
}
else { // not a number so return zero
s = "0.00";
}
return '$' + s;
}
</script>


ShriekForth

[bspahr75]

Thanks for the reply.

I just tried your suggestion, but am still getting an error:
http://www.htc.net/~jspahr/form1.htm

[ShriekForth]

2 things,
First the number you set for item total needs to be the number in the field name
<input type="text" name="txtSold1" size="9" value="" onBlur="calculate(this.form); itemTotal('1')">
<input type="text" name="txtSold2" size="9" value="" onBlur="calculate(this.form); itemTotal('2')">

and second, you removed your calculate function, so that errors. Put it back as so

function calculate(what) {

for (var i=1,answer=0;i<9;i++)
answer += what.elements['txtSold' + i].value - 0;
what.txtGrandTotal.value = answer;
}
</script> where txtGrandTotal is the name of the field you want the total to appear in, on youy last version is was "answer".


ShriekForth

[bspahr75]

Ok - it is so close!
Everything is working except - I can't get the grand total
at the bottom to calculate like the total items sold above it.

I created a new function just like the other one - i thought this would take care of it, but I must be something srong.

Thanks for all your help.

[bspahr75]

wait a second - it is working, you just have to click out of one of the text boxes on the bottom row.

Is there a way to have it so that you just have click out of the top row and everything on the bottom will calculate also?

[ShriekForth]

call your calculateGrand onBlur as well, but call it after itemTotal,

<input type="text" onBlur="calculate(this.form); itemTotal('3'); calculateGrand(this.form);">
<input type="text" onBlur="calculate(this.form); itemTotal('4'); calculateGrand(this.form);"> etc....

ShriekForth

[bspahr75]

That did it - you are awesome man! Thanks so much for your help. You have know idea how much I appreciate it.

[ShriekForth]

Gald to help, it's been slow here at work. A little extra scripting has not killed me yet. Besides, the pressure is off me to get it done.

ShriekForth

[Dean Forant]

This thread is similar to a problem I'm also having with form calculations. But My delemma is the form rows are coming from a mySQL Database..

I have a database table for features available on a spacific model number..

after the recordset populates rows for the forms I need to automatically calculate the total price if the user changes the quantity in any of these rows.

heres how my form looks now. if anyone can point me in the right direction to accomplish the above I would appreciate it

<tr>
<td><div align="center">
<input type="checkbox" name="<% response.write rs("FeatureCode") %>" value="Yes">
</div></td>
<td><input type="hidden" name="Desc<% response.write rs("FeatureCode") %>"value ="<% response.write rs("Description") %>">
<% response.write rs("Description") %> </td>
<td>$
<input type="text" name="Price<% response.write rs("FeatureCode") %>" size="8" value="<% response.write rs("Price") %>"></td>
<td><input type="text" name="Qty<% response.write rs("FeatureCode") %>" size="4"></td>
<td>$
<input type="text" name="Total<% response.write rs("FeatureCode") %>" size= "10"></td>
</tr>

The above code is just the form elements after I've opened the database connection and declared the form tag..

Thank you
Dean Forant

[glenngv]

Dean Forant:

<td><input type="text" name="Qty<% response.write rs("FeatureCode") %>" size="4" onchange="this.form.Total<%=rs("FeatureCode")%>.value=this.form.Price<%=rs("FeatureCode")%>.value*this.value"></td>

Since this is inside the loop and the field "FeatureCode" is repeatedly used, it is more efficient to put it in a variable instead of repetitively accessing it in the Recordset Fields collection.


ShriekForth:
eval() is unnecessary. It works but if you search this forum, you'll see the reason why people don't use eval that much.

function itemTotal(item){
var f = document.frmOder;
f.elements["txtGrand"+item].value = f.elements["txtCost"+item].value * f.elements["txtSold"+item].value;
}

For more info on bracket notation, click this (http://www.litotes.demon.co.uk/js_info/sq_brackets.html).