Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Need help with loop to add numbers

Reply
Thread Tools

Need help with loop to add numbers

 
 
lawrencec@lithotech.co.za
Guest
Posts: n/a
 
      07-10-2006
Hi there,

I'm trying to add the values of a number of form fields and to get a
result at the end. It must loop and be able to dynamically update the
result of calculation. I have attached the code i have so far.

Thanks

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script language="JavaScript1.2" type="text/JavaScript">

function calculate(currid)
{
var rownumber = "";
var Qnt;
var Qnt_Total;

rownumber = currid.substring(currid.indexOf("_", currid) + 1);

//DEBUGGING
//alert(rownumber);
//return false;

Qnt = document.getElementById("Quantity_" + rownumber).value;

for(var j = 0 ; j <= document.CaptureForm.elements.length ; j++)
{
cnt = j + 1;
//if(eval(document.CaptureForm.elements[j].id) == "[object]")
if(document.CaptureForm.elements[j].id ==
"Quantity_"+String(cnt))
{
if(document.CaptureForm.elements[j].value != "")
Qnt_Total += Number(document.CaptureForm.elements[j].value);
}
}

document.CaptureForm.Totals1.value = Qnt_Total;
}

</script>

</head>

<body>
<form action="" method="post" name="CaptureForm">

<SPAN id="Quantity_Label" style="LEFT: 518px; WIDTH: 62px; COLOR:
#000000;POSITION: absolute; TOP: 186px; HEIGHT: 13px; BACKGROUND-COLOR:
transparent; FONT-FAMILY:MS Sans Serif; FONT-SIZE:8pt;">Quantity</SPAN>
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 200; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity" id="Quantity_1" value="<?php echo
$row_Recordset1['Quantity']; ?>" onBlur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 226; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity2" id="Quantity_2" value="<?php echo
$row_Recordset1['Quantity2']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 252; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity3" id="Quantity_3" value="<?php echo
$row_Recordset1['Quantity3']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 279; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity4" id="Quantity_4" value="<?php echo
$row_Recordset1['Quantity4']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 305; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity5" id="Quantity_5" value="<?php echo
$row_Recordset1['Quantity5']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 331; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity6" id="Quantity_6" value="<?php echo
$row_Recordset1['Quantity6']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 358; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity7" id="Quantity_7" value="<?php echo
$row_Recordset1['Quantity7']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 384; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity8" id="Quantity_8" value="<?php echo
$row_Recordset1['Quantity8']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 410; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity9" id="Quantity_9" value="<?php echo
$row_Recordset1['Quantity9']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 436; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity10" id="Quantity_10" value="<?php echo
$row_Recordset1['Quantity10']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 463; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity11" id="Quantity_11" value="<?php echo
$row_Recordset1['Quantity11']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
COLOR: #000000;POSITION: absolute; TOP: 489; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Quantity12" id="Quantity_12" value="<?php echo
$row_Recordset1['Quantity11']; ?>" onblur="javascript:
calculate(this.id);">
<INPUT type="text" style="LEFT: 493; text-align: right; WIDTH:
100px; COLOR: #000000;POSITION: absolute; TOP: 518; HEIGHT: 19px;
BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
FONT-SIZE:8pt;" name="Totals1" id="Totals1" value="<?php echo
$row_Recordset1['Totals1']; ?>">
</form>

</body>
</html>

 
Reply With Quote
 
 
 
 
Vincent van Beveren
Guest
Posts: n/a
 
      07-10-2006
Hi Lawrence,

Do you have a question? Besides, you can't use javascript: in an
eventhandler attribute (in your case onblur), because it already expects
that. Javascript: is only used as an URL.

Vincent




http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Hi there,
>
> I'm trying to add the values of a number of form fields and to get a
> result at the end. It must loop and be able to dynamically update the
> result of calculation. I have attached the code i have so far.
>
> Thanks
>
> <html>
> <head>
> <title>Test</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
>
> <script language="JavaScript1.2" type="text/JavaScript">
>
> function calculate(currid)
> {
> var rownumber = "";
> var Qnt;
> var Qnt_Total;
>
> rownumber = currid.substring(currid.indexOf("_", currid) + 1);
>
> //DEBUGGING
> //alert(rownumber);
> //return false;
>
> Qnt = document.getElementById("Quantity_" + rownumber).value;
>
> for(var j = 0 ; j <= document.CaptureForm.elements.length ; j++)
> {
> cnt = j + 1;
> //if(eval(document.CaptureForm.elements[j].id) == "[object]")
> if(document.CaptureForm.elements[j].id ==
> "Quantity_"+String(cnt))
> {
> if(document.CaptureForm.elements[j].value != "")
> Qnt_Total += Number(document.CaptureForm.elements[j].value);
> }
> }
>
> document.CaptureForm.Totals1.value = Qnt_Total;
> }
>
> </script>
>
> </head>
>
> <body>
> <form action="" method="post" name="CaptureForm">
>
> <SPAN id="Quantity_Label" style="LEFT: 518px; WIDTH: 62px; COLOR:
> #000000;POSITION: absolute; TOP: 186px; HEIGHT: 13px; BACKGROUND-COLOR:
> transparent; FONT-FAMILY:MS Sans Serif; FONT-SIZE:8pt;">Quantity</SPAN>
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 200; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity" id="Quantity_1" value="<?php echo
> $row_Recordset1['Quantity']; ?>" onBlur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 226; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity2" id="Quantity_2" value="<?php echo
> $row_Recordset1['Quantity2']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 252; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity3" id="Quantity_3" value="<?php echo
> $row_Recordset1['Quantity3']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 279; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity4" id="Quantity_4" value="<?php echo
> $row_Recordset1['Quantity4']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 305; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity5" id="Quantity_5" value="<?php echo
> $row_Recordset1['Quantity5']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 331; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity6" id="Quantity_6" value="<?php echo
> $row_Recordset1['Quantity6']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 358; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity7" id="Quantity_7" value="<?php echo
> $row_Recordset1['Quantity7']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 384; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity8" id="Quantity_8" value="<?php echo
> $row_Recordset1['Quantity8']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 410; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity9" id="Quantity_9" value="<?php echo
> $row_Recordset1['Quantity9']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 436; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity10" id="Quantity_10" value="<?php echo
> $row_Recordset1['Quantity10']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 463; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity11" id="Quantity_11" value="<?php echo
> $row_Recordset1['Quantity11']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 489; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity12" id="Quantity_12" value="<?php echo
> $row_Recordset1['Quantity11']; ?>" onblur="javascript:
> calculate(this.id);">
> <INPUT type="text" style="LEFT: 493; text-align: right; WIDTH:
> 100px; COLOR: #000000;POSITION: absolute; TOP: 518; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Totals1" id="Totals1" value="<?php echo
> $row_Recordset1['Totals1']; ?>">
> </form>
>
> </body>
> </html>
>

 
Reply With Quote
 
 
 
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      07-10-2006
(E-Mail Removed) writes:

> I'm trying to add the values of a number of form fields and to get a
> result at the end. It must loop and be able to dynamically update the
> result of calculation. I have attached the code i have so far.


> <script language="JavaScript1.2" type="text/JavaScript">


Don't use the language attribute. If you do use the langauge
attribute, make sure *not* to specify version 1.2. That particular
version of Javascript was only the most current one in Nescape
Navigator 4.0 through 4.06. It had slightly different behavior
from earlier and later versions, and was probably replaced for
that reason. Specifying version 1.2 will make Netscape and Mozilla
browsers use that slightly different behavior, whereas other
browsers will use the behavior of the more recent versions
of Javascript.


> function calculate(currid)
> {
> var rownumber = "";


The indentation makes it hard to read and comment on the code, so I've
prettyprinted it:

> function calculate(currid) {


I assume currid is the id of an input element.

> var rownumber = "";
> var Qnt;
> var Qnt_Total;
> rownumber = currid.substring(currid.indexOf("_", currid) + 1);
> Qnt = (document.getElementById("Quantity_" + rownumber)).value;


Isn't "Quantity_"+rownumber always the same as currid?

You are not using "Qnt" anywhere, so both rownumber and Qnt can be
omitted.


> for (var j = 0;j <= document.CaptureForm.elements.length;j++) {


"<=" should be "<"

> cnt = j + 1;
> if (document.CaptureForm.elements[j].id == "Quantity_" + String(cnt))


You are expecting the Quantity_x's to come in a fixed order. They
probably do, but it's not necessary for computing the sum.

> {
> if (document.CaptureForm.elements[j].value != "")
> Qnt_Total += Number(document.CaptureForm.elements[j].value);


Qnt_Total was never initialized, so it initially contained undefined.
Adding numbers to that gives NaN.

> }
> }
> document.CaptureForm.Totals1.value = Qnt_Total;
> }


Try this instead:

<script type="text/javascript">
function calculate(inputId) {
var totalQuantity = 0;
var elems = document.forms['CaptureForm'].elements;
for(var i = 0; i < elems.length; i++) {
var elem = elems[i];
if (elem.id.matches(/^Quantity_\d+$/)) {
totalQuantity += Number(elem.value):
}
}
elems['Totals1'].value = tatalQuantity;
}
</script>


> <form action="" method="post" name="CaptureForm">


Is the form intended for submission? In that case, you should state
the URL, and not just rely on the browser posting to the same URL as
itself (it should do that, but some browsers didn't).


Some comments on the HTML:

> <SPAN id="Quantity_Label" style="LEFT: 518px; WIDTH: 62px; COLOR:
> #000000;POSITION: absolute; TOP: 186px; HEIGHT: 13px; BACKGROUND-COLOR:
> transparent; FONT-FAMILY:MS Sans Serif; FONT-SIZE:8pt;">Quantity</SPAN>


You should look into using a stylesheet, so you don't specify this
huge style attribute on every span (easier to read and easier to
maintain, since the common styles are specified in just one
place).

You might also want to use the <label> element for labels:
<label id="Quantity_Label" for="Quantity_1">Quantity</label>

It looks like auto-generated code by a less-than-brilliant HTML
authoring program

> <INPUT type="text" style="LEFT: 506; text-align: right; WIDTH: 86px;
> COLOR: #000000;POSITION: absolute; TOP: 200; HEIGHT: 19px;
> BACKGROUND-COLOR: transparent; FONT-FAMILY:MS Sans Serif;
> FONT-SIZE:8pt;" name="Quantity" id="Quantity_1" value="<?php echo


Your "name" attribute is inconsistent. To match the other lines,
it would be "Quantity1".

> $row_Recordset1['Quantity']; ?>" onBlur="javascript:
> calculate(this.id);">


You are including php-code here. That does not help us help you, since
we annot know exactly what HTML code the browser sees. I'll assume
that the PHP code just inserts a number.

The onblur attribute starts with "javascript:". That's unnecessary, and
only coincidentally not an error. The Javascript parser sees it as
a label that just happens to be called "javascript", but could equally
well be called "arglebargle". (However, IE parses it as specifying
that the attribute should be parsed as Javascript, which is only
necessary if the page's general scripting language is something else,
like vbscript).

/L
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      07-10-2006
Vincent van Beveren wrote:
<snip>
>... Besides, you can't use javascript: in an eventhandler attribute (in
> your case onblur), because it already expects that.


The values for intrinsic event handling attributes can start with -
javascript: -. In that context it would be a label by javascript syntax
rules. Putting a label in that context is almost always worthless, and
as a label - javascript - is a dangerous choice as IE browsers attach
additional meaning to the construct in a way that will not result in a
label, but it still syntactically valid, mostly harmless and allowed.

> Javascript: is only used as an URL.

<snip>

The javascript pseudo protocol (which is a different thing from a label
in an intrinsic event attribute value) should almost never be used at
all. ('almost' meaning that there are maybe two contexts at most where
its use might be appropriate, neither or which are common).

> (E-Mail Removed) wrote:

<snip>

Please do not top-post to comp.lang.javascirpt, and do trim the
material that you do quote to only that which is necessary to maintain
the context of your response.

Richard.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Triple nested loop python (While loop insde of for loop inside ofwhile loop) Isaac Won Python 9 03-04-2013 10:08 AM
Need to add a row to total the numbers in the grid Velvet ASP .Net Web Controls 1 04-13-2006 02:34 AM
Easy need to add ddl to loop TN Bella ASP .Net 1 08-12-2004 12:21 AM
Array sort function sorts on chars not numbers ... help ! how to sort numbers GIMME Javascript 5 07-26-2004 01:28 AM
help: loop within a loop -how to display data in 3 columns by 4 rows format addi ASP General 0 12-31-2003 04:31 AM



Advertisments