Dynamically create unique ID for an array of input fields using Javascript

Question

I have an array of dates. The code below loops over the dates to print out an the dates with text fields. What I'm trying to do is create an array of text fields which has unique ID's. Then pass each dates with its array text field (values) into a php script.

Any ideas?

  for (var i in dates) {
    var d = dates[i];

    if (d) { // sometimes the date is not actually selected, that's why we need to check.
        var length = 12;
        var str = i+d;
        var myUniqueTime = str.substring(0,length);
        myUniqueTime = myUniqueTime.replace(/^\s+|\s+$/g, '');


        times= ["<input type=\"text\" id=\""+i+"\" size=\"8\" name=\""+i+"\" onChange=\"changeTimeTo24Hrs()\" value=\""+i+"\" />", "<input type=\"text\" id=\"times\" size=\"8\" name=\"times\" value=\""+i+"\" />"];

      // OK, selected.  Fill an input field.  Or something.  Just for example,
      // we will display all selected dates in the element having the id "output".
      el.innerHTML += "I = " + i + "<br />" + times + "<br />" + d.print("%A, %Y %B %d") + " <font size='-1'>" + myUniqueTime + "</font><br /><BR />";

    }
  }

Answer 1

You can give all your text fields the name: name ="dateField[]" then on the PHP side you will have an array of dateFields in your $_POST variable.

That is after submitting the form your $_POST['dateField'] will look like this: $_POST['dateField'] = array('date 1...', 'date 2...', 'date 3...');

EDIT:

If you have a form:

<form method="post" action="formHandler.php">
  <input type="text" name="dateField[]" value="some date"/>
  <input type="text" name="dateField[]" value="some other date"/>
</form>

And you submit that form then the php file formHandler.php (specified by action="formHandler.php") will be called. In formHandler.php you can work with the dates that were submitted.

formHandler.php:

echo 'First date: ' . $_POST['dateField'][0];
echo 'Second date: ' . $_POST['dateField'][1];

Answer 2

for(var i = 0; i < dates.length; i++){
  textbox = document.createElement('input');
  textbox.type = 'text';
  textbox.id   = i;
  el.appendChild(textbox);
}

You should bookmark w3schools.com for the javascript api. This is an easy thing to reference rather then have to ask a question.