Question

I want to create a javascript form that basically has a bunch of text input boxes. But I want the number of boxes to be the value of some variable, and I would like the id’s or the names of the boxes to be elements in one array.

Actually, any solution to the following problem would be great. I have some variable x, and if x=10 then the form will be ten text input boxes, and at the end of the day (when the user clicks on the button to say “I’ve finished filling in these boxes now”) I can create an array of length 10 whose entries are the contents of the ten text input boxes. But if x was 3 then there would be three text input boxes and I end up with an array of length 3 etc etc.

My current work-around, which is awful, currently involves 50 text input boxes, with names box01 to box50, and then 50 lines of the form a[1]=box01 a[2]=box02 etc etc, and the user can just leave all the ones he’s not interested in blank. But I would imagine that something more streamlined is possible!

Answer 1

To create the textboxes:

var x = 10,
    str = '';
while (x) {
  str = str + '<input type="text" name="box[]" id="box' + x + '">';
  x = x - 1;
}

Then you have a string str which you can insert in to the DOM. Because the name attribute is an ‘array’ (the square brackets mean “the value of this input is an element of the box array”).

On the server side, you can then loop through this array. In PHP:

foreach ($_POST['box'] as $box) {
  // do something with the input value
}

The foreach will loop through $_POST['box'] (which is an array, because we used those square brackets), and you can do whatever you like with each box value inside the loop.