Need help with loop to add numbers

Discussion in 'Javascript' started by lawrencec@lithotech.co.za, Jul 10, 2006.

  1. Guest

    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>
     
    , Jul 10, 2006
    #1
    1. Advertising

  2. 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




    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>
    >
     
    Vincent van Beveren, Jul 10, 2006
    #2
    1. Advertising

  3. 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;
    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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Jul 10, 2006
    #3
  4. 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).

    > 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.
     
    Richard Cornford, Jul 10, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Teep
    Replies:
    2
    Views:
    787
    Larry Marburger
    Jun 21, 2004
  2. TN Bella

    Easy need to add ddl to loop

    TN Bella, Aug 11, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    317
    TN Bella
    Aug 12, 2004
  3. Velvet

    Need to add a row to total the numbers in the grid

    Velvet, Apr 13, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    119
    Velvet
    Apr 13, 2006
  4. GIMME
    Replies:
    5
    Views:
    200
    Thomas 'PointedEars' Lahn
    Jul 26, 2004
  5. Isaac Won
    Replies:
    9
    Views:
    444
    Ulrich Eckhardt
    Mar 4, 2013
Loading...

Share This Page