www.webdeveloper.com
Results 1 to 5 of 5

Thread: Adding numbers from array textbox

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    15

    Question Adding numbers from array textbox

    Hello everybody
    I have a form that has two columns of numbers.
    this form is the second form in the series of forms and can have different number of rows (selected by user in the previous form) therefore I name the textboxes with an array (for example COLA[1], COLA[2])

    I am trying to add a button that adds up the numbers users enter.It does not work. What am I doing worng?
    Here is my code:

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function computeForm(form)
    {
    var SUMA = 0;
    var SUMB = 0;
    var SA = parseFloat(form.COLA[1].value) + parseFloat(form.COLA[2].value);
    var SB = parseFloat(form.COLB[1].value) + parseFloat(form.COLB[2].value);
    form.SUMA.value = SA;
    form.SUMB.value = SB;
    return
    }
    </SCRIPT>
    </head>

    <body>
    <CENTER>
    <FORM method=POST>
    <TABLE border>
    <TR>
    <TD>
    A
    </TD>
    <TD>
    B
    </TD>
    </TR>
    <TR>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=COLA[1]>
    </TD>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=COLB[1]>
    </TD>
    </TR>
    <TR>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=COLA[2]>
    </TD>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=COLB[2]>
    </TD>
    </TR>
    <TR>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=SUMA>
    </TD>
    <TD>
    <INPUT TYPE=TEXT SIZE=4 NAME=SUMB>
    </TD>
    </TR>
    </TABLE>
    <INPUT TYPE="button" VALUE="Compute" onClick=computeForm(this.form)></FORM>

  2. #2
    Join Date
    Dec 2004
    Location
    Kansas City, Missouri
    Posts
    31
    Hello,
    I'm not sure if this is your whole code or not, but I'm going to guess that you just pasted parts of it.

    I believe that the error is related to the names of the text boxes. If you remove the brackets, the code will work. (COL1 instead of COL[1])
    If you are dynamically naming the text boxes from an array, leave out the brackets in the naming processing.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>JS Test</title>
          <script language="JavaScript" type="text/javascript">
            function computeForm(form) {
              var SUMA = 0;
              var SUMB = 0;
              var SA = parseFloat(form.COLA1.value) + parseFloat(form.COLA2.value);
              var SB = parseFloat(form.COLB1.value) + parseFloat(form.COLB2.value);
              form.SUMA.value = SA;
              form.SUMB.value = SB;
            }
          </script>
        </head>
        <body>
          <center>
            <form method=POST>
              <table>
                <tr>
                  <td> A</td>
                  <td> B</td>
                </tr>
                <tr>
                  <td><input type="text" size="4" name="COLA1"></td>
                  <td><input type="text" size="4" name="COLB1"></td>
                </tr>
                <tr>
                  <td><input type="text" size="4" name="COLA2"></td>
                  <td><input type="text" size="4" name="COLB2"></td>
                </tr>
                <tr>
                  <td><input type="text" size="4" name="SUMA"></td>
                  <td><input type="text" size="4" name="SUMB"></td>
                </tr>
              </table>
              <input type="button" value="Compute" onClick=computeForm(this.form)>
            </form>
          </center>
        </body>
    </html>
    We're Tiny,
    We're Toony,
    We're all a little loony.
    The scripts were rejected;
    Expect the Unexpected.

  3. #3
    Join Date
    Dec 2012
    Posts
    15
    This form is generated by a php form where users select the number of rows. So I need to name the textboxes accordingly with an array.
    How else can I achieve this?

  4. #4
    Join Date
    Dec 2004
    Location
    Kansas City, Missouri
    Posts
    31
    You can still name the text boxes dynamically with a for loop via php.

    Something along the lines of:
    (I used the attribute 'id' instead of name)
    Code:
    for(var $i = 0; $i < $num_boxes_selected_by_user; $i++)
    {
       echo "<input type=\"textbox\" id=\"col' . $i . '\" />";
    }
    Each input name would look like: col0, col1, col2, col3, etc.

    If the selection of how many boxes is not on the same page, you would need to save the value of boxes that the user picked either in a session variable that you could access, as a parameter in your URL string, or as a value in a hidden input field.

    Then your page would look something like:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>JS Test</title>
          <script language="JavaScript" type="text/javascript">
            function computeForm(form) {
              var SA = 0;
              var SB = 0;
              for(var j = 0; j < 2; j++)
              {
                SA += (parseFloat(document.getElementById("COLA"+j).value));
                SB += (parseFloat(document.getElementById("COLB"+j).value));
              }
              form.SUMA.value = SA;
              form.SUMB.value = SB;
            }
          </script>
        </head>
        <body>
          <center>
            <form method=POST>
              <table>
                <tr>
                  <td> A</td>
                  <td> B</td>
                </tr>
                <tr>
                  <td><input type="text" size="4" id="COLA0"></td>
                  <td><input type="text" size="4" id="COLB0"></td>
                </tr>
                <tr>
                  <td><input type="text" size="4" id="COLA1"></td>
                  <td><input type="text" size="4" id="COLB1"></td>
                </tr>
                <tr>
                  <td><input type="text" size="4" id="SUMA"></td>
                  <td><input type="text" size="4" id="SUMB"></td>
                </tr>
              </table>
              <input type="button" value="Compute" onClick=computeForm(this.form)>
            </form>
          </center>
        </body>
    </html>
    I have a value of 2 in my for loop b/c that's all I have for this demo. You would change that to the variable that you store the user's number of boxes selection.

    I hope this helps.
    We're Tiny,
    We're Toony,
    We're all a little loony.
    The scripts were rejected;
    Expect the Unexpected.

  5. #5
    Join Date
    Dec 2012
    Posts
    15

    Thanks but ....

    Thank you very much for trynig to help a beginner Compbrat but my problem is not getting solved.
    Let me explain:

    page 1: on this php page users tells you how many items he picks up (say 5) and click on a button
    page 2: on this php page an array of 5 drop down menus are created for products and for each one there is one text box for quantity. Then the user click on a button
    page 3: on this page information is saved to database.

    I need a calculation on step 2 to add up the values entered in those texboxes of price and show the user on the same page how much it costs before he clicks the order to next step.

    I am trying to write the calcualton script with javascript.
    If I do not use array what elese can I do (becasue I would not be able to send and and use the data to the third page? and if I do use array for naming the txtboxes how do I caluclate?
    This is my problem.
    Any suggestions is appreciated.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles