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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dickey
Forum Commoner
Posts: 50
Joined: Thu May 16, 2002 8:04 pm
Location: Sydney, Australia

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

Post 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
Last edited by Benjamin on Wed Apr 29, 2009 6:22 pm, edited 1 time in total.
Reason: Changed code type from text to php.
User avatar
it2051229
Forum Contributor
Posts: 312
Joined: Tue Dec 25, 2007 8:34 pm

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

Post 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.
Last edited by Benjamin on Wed Apr 29, 2009 11:05 pm, edited 1 time in total.
Reason: Changed code type from text to html, php.
dickey
Forum Commoner
Posts: 50
Joined: Thu May 16, 2002 8:04 pm
Location: Sydney, Australia

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

Post 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
Post Reply