Solved

Array in forms

Posted on 2002-04-11
9
19,725 Views
Last Modified: 2011-08-18
I have a form like this

<form>
<input type="hidden" name="hiddenField" value="">
<input type="text" name="field[0]" value="a">
<input type="text" name="field[1]" value="b">
<input type="text" name="field[2]" value="c">
</form>

With Javascript, is there an other way to refer to "field[0]" than with

document.forms[0].elements[1].value

??

If I have a lot of form-fields in the form, it's hard to keep track of the index of each element.

What I'm thinking of is something similar to

document.forms[0].field[0].value

but which is legal.

Batalf

0
Comment
Question by:Batalf
  • 6
  • 3
9 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 6935343
I would not use [ or ] in your field names, but you can do this:

  <form name='myform'>
   <input type="text" name="field0" value="a">
   <input type="text" name="field1" value="b">
   <input type="text" name="field2" value="c">
  </form>



and then in your script:

  for ( var i=0; i<3; i++ )
  {
     alert( eval("document.myform.field" + i + ".value") );
  }
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6935347
or:

   for ( var i=0; i<3; i++ )
   {
      alert( eval("document.forms[0].field" + i + ".value") );
   }
0
 
LVL 32

Author Comment

by:Batalf
ID: 6935352
But then it's a little bit harder to read by our serverside-script(PHP). It's easier to just loop through an array.

Batalf
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 33

Expert Comment

by:knightEknight
ID: 6935360
then just give all your fields the same name:

 <form name='myform'>
  <input type="text" name="myfield" value="a">
  <input type="text" name="myfield" value="b">
  <input type="text" name="myfield" value="c">
 </form>


  for ( var i=0,n=document.forms[0].myfield.length; i<n; i++ )
  {
     alert(document.forms[0].myfield[i].value);
  }
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6935369
... the browser will create an array of fields off the form call "myfield", and you can loop thru it as above.
0
 
LVL 32

Author Comment

by:Batalf
ID: 6935378
Hm. Interesting idea you present here. I didn't know that Javascript did that. But: The problem with this solution is that PHP on the server doesn't recognize myfield as an array. It looses all values except the last one only the value "c" seems to be sent to the server.

Batalf
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6935481
well, I am not comfortable using [ or ] in field names, but if it works for you in every other respect, then perhaps a variation on my previous idea will work (not tested)


  <form>
   <input type="hidden" name="hiddenField" value="">
   <input type="text" name="field[0]" value="a">
   <input type="text" name="field[1]" value="b">
   <input type="text" name="field[2]" value="c">
  </form>



  for ( var i=0; i<3; i++ )
  {
     alert( eval("document.forms[0].field[" + i + "].value") );
  }
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 50 total points
ID: 6935486
or maybe:

 for ( var i=0; i<3; i++ )
 {
    alert( eval("document.forms[0].elements['field[" + i + "]'].value") );
 }
0
 
LVL 32

Author Comment

by:Batalf
ID: 6935491
Thank you! That did the trick.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question