Need help with loop to add numbers

L

lawrencec

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>
 
V

Vincent van Beveren

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




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>
 
L

Lasse Reichstein Nielsen

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;
if (elem.id.matches(/^Quantity_\d+$/)) {
totalQuantity += Number(elem.value):
}
}
elems['Totals1'].value = tatalQuantity;
}
<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
 
R

Richard Cornford

Vincent van Beveren wrote:
... 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 address 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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,439
Members
44,829
Latest member
PIXThurman

Latest Threads

Top