calculation with javascript

**Piotto** · 11-08-2009, 09:29 AM

Hi everybody. As a beginner i am trying to understand a tutorial i found about calculation in a form. Now, I got the code working, but only if there is one line to calculate (only with PRODUCT 1 for example).

Why? How can i have the code working for any number of products no matter how many?

Here is the code...

[CODE]
<HTML>
<HEAD>
<SCRIPT language = JavaScript>
function calculate2() {
A = document.catalogo1.itemprice.value
B = document.catalogo1.itemquantity.value
A = Number(A)
B = Number(B)
C = (A * B)
document.catalogo1.subtotal.value = C
}
</SCRIPT>
</HEAD>
<BODY onload = calculate2()>
<FORM NAME = catalogo1>
PRODUCT 1 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="75.50" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="2"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 2 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="12.85" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="4"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 3 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="25.45" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="7"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 4 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="62.20" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="5"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = "">
</FORM>
</BODY>
</HTML>
[CODE]

Any help will be really appreciated. Thanks

**vwphillips** · 11-08-2009, 01:26 PM

Code:

<HTML>
<HEAD>
<SCRIPT language = JavaScript>
function calculate2() {
 var frm=document.catalogo1;
 var a=frm.itemprice;
 var b=frm.itemquantity;
 var c=frm.subtotal;
// elements of the same name form an arry like collection
 for (var z0=0;z0<a.length;z0++){
  c[z0].value=a[z0].value*b[z0].value;
 }

}
</SCRIPT>
</HEAD>
<BODY onload = calculate2()>
<FORM NAME = catalogo1>
PRODUCT 1 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="75.50" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="2"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 2 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="12.85" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="4"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 3 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="25.45" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="7"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 4 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="62.20" onkeyup = calculate2()> X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="5"> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = "">
</FORM>
</BODY>

**jscheuer1** · 11-08-2009, 02:47 PM

The onkeyup event appears to be on the wrong input elements. I believe it should be on the itemquantity inputs.

**vwphillips** · 11-08-2009, 04:14 PM

if you are allowing the user to input numbers tis best to make sure they are numbers

two of many methods

Code:

function calculate2() {
 var frm=document.catalogo1;
 var a=frm.itemprice;
 var b=frm.itemquantity;
 var c=frm.subtotal;
// elements of the same name form an arry like collection
 for (var z0=0;z0<a.length;z0++){
  c[z0].value=a[z0].value*(b[z0].value.replace(/\D/g,'')||0); // this allows intega numbers  only

// or
  c[z0].value=a[z0].value*parseFloat(b[z0].value.replace(/[^\d\.]/g,'')||0); // this allows floating point numbers
 }

**Piotto** · 11-08-2009, 04:52 PM

Thanks for the reply. It works perfectly. I hope some day i will be able to help people the way you do. I still have lots to study!

It is true, the onkeyup is in the wrong place and i have already corrected it. About checking if is really a number i am using another script but your solution seems to be better than mine

.

Now, to complete my catalogue i need to sum all the subtotal fields... but still can't figure out how... Any suggestion?

**vwphillips** · 11-08-2009, 05:20 PM

Code:

<HTML>
<HEAD>
<SCRIPT language = JavaScript>
function calculate2() {
 var frm=document.catalogo1;
 var a=frm.itemprice;
 var b=frm.itemquantity;
 var c=frm.subtotal;
// elements of the same name form an arry like collection
 for (var total=0,z0=0;z0<a.length;z0++){
  c[z0].value=a[z0].value*(b[z0].value.replace(/\D/g,'')||0); // this allows intega numbers  only
//or
//  c[z0].value=a[z0].value*parseFloat(b[z0].value.replace(/[^\d\.]/g,'')||0); // this allows floating point numbers  only
  total+=c[z0].value=a[z0].value*1;
 }
 var a=frm.total.value=total;
}
</SCRIPT>
</HEAD>
<BODY onload = calculate2()>
<FORM NAME = catalogo1>
PRODUCT 1 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="75.50" > X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="2" onkeyup = calculate2()> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 2 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="12.85" > X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="4" onkeyup = calculate2()> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 3 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="25.45" > X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="7" onkeyup = calculate2()> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = ""><br><br>
PRODUCT 4 - Price: <INPUT readonly TYPE = Text NAME = itemprice SIZE = 5 value ="62.20" > X Quantity: <INPUT TYPE = Text NAME = itemquantity SIZE = 5 value ="5" onkeyup = calculate2()> = SubTotal: <INPUT readonly TYPE = Text NAME = subtotal SIZE = 5 value = "">
<INPUT readonly TYPE = Text NAME = total SIZE = 5 value ="" ></FORM>
</BODY>

**Piotto** · 11-08-2009, 05:51 PM

Hi Vic, and thanks again for your availability.

I have a problem with the last script... I can't have it to work. I can see the sum in the TOTAL textbox but the multiplication part doesn't work anymore.

What is wrong?

regards
Alex Piotto

Thread: calculation with javascript

Thread Tools

Search Thread

calculation with javascript

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions