Page 1 of 1

Using JS to access a form element where the id is an array

Posted: Wed Apr 29, 2009 6:19 pm
by dickey
Hello,

I have generated numerous form fields using PHP and can happily pass the values (arrays) I require by form post. I wanted to do some calculations on the fly to display subtotals etc with a js function but am unsure of the syntax to access an id that is an array.

For example, I would like to have a running total based on the sum of elements in orderQty[] and update a field with id="tlOrderQty" but I am unsure of the syntax.

Code: Select all

 
<?php
foreach ($_SESSION['taxonomies'] as $taxonomy)
        {
          $desc = explode('^',$taxonomy);
          echo '<tr>';
            echo '<td>'.$desc[0].'</td>';
            echo '<td>'.$desc[1].'</td>';
            echo '<td>'.$desc[2].'</td>';
           echo '<td><input type="text" id="orderQty[]" name="orderQty[]" onchange="total_order();"></td>';
            echo '<td><input type="text" id="unitPrice[]" name="unitPrice[]</td>">';
            echo '<td><input type="text" id="extPrice[]" name="extPrice[]"></td>';
            $i = $i + 1;
        }
?>
 
Grateful for any assistance, Andrew

Re: Using JS to access a form element where the id is an array

Posted: Wed Apr 29, 2009 11:02 pm
by it2051229
using javascript let me show you an example..
suppose I have this:

Code: Select all

 
<div id='theDiv'>
      <input type='text' id='theId[]' /><br />
      <input type='text' id='theId[]' /><br />
      <input type='text' id='theId[]' />
</div>
 
as you can you see the code above has three textfields where the id is an array.. now I want to put a value let's say "HELLO" on all the textfields via
javascript... and using the document.getElementById() isn't appropriate because it's only intended for referring to a single object.. but you can do it
like this:

Code: Select all

 
// get all the INPUT tags on the div
var theDiv = document.getElementById("theDiv");
var theInputs = theDiv.getElementsByTagName("input"); // <--- this does the trick
 
// the variable "theInputs" is an ARRAY containing all the input tags.
// now we need to confirm that if it's a TEXTBOX, then we could put the value "HELLO"
for(int i = 0; i < theInputs.length; i++)
{
     if(theInputs[i].type == "text")
     {
            theInputs[i].value = "HELLO";
     }
}
 
and that's it.... now that's the basic, the problem you will encounter next is how to SPECIFICALLY choose of the THREE TEXT FIELDS where to put the "HELLO".... that's for you to figure out but it is possible by adding more tags (e.g. div) with a unique id for each input tags.

Re: Using JS to access a form element where the id is an array

Posted: Thu Apr 30, 2009 5:49 am
by dickey
Thanks it2051229,

Along the same lines I found I could access the field value arrays with this syntax:

Code: Select all

 
<html>
  <head>
     <script>
     function egfunction()
     {
         var boo = hoo.elements["info[]"][0].value;
         alert (boo);
         var booboo = hoo.elements["info[]"][1].value;
         alert (booboo);
         
         var total = parseInt(0);
         for(var i = 0; i < 2; i++)
         {
           var row = parseInt(hoo.elements["info[]"][i].value);
           total = total + row; 
         }
         alert (total);   
     }
     </script>
  </head>
  <body>
               <form id="hoo">
                  <input type="text" id="info[]" name="info[]" value="2">
                  <input type="text" id="info[]" name="info[]" value="4">
               
                  <input type="button" onclick="egfunction();">
               </form>
  </body>
</html>
 
Again thanks, Andrew