how to change id of form elements before form gets submitted?
<p>I have a table with many rows and each row has select lists.  Something like this:</p>

<pre><code>| USER    | MANAGER            | DEPARTMENT   |

| Rob     | [John Smith |V]    | [Sales |V]   | 

| Sue     | [Bob Jones |V]     | [Support |V] |
</code></pre>

<p>The user is free to add new rows, there are many rows and the contents of the lists are complex.  </p>

<p>I simplified things considerably by giving every manager selector id 'manager', and every department selector id 'department'.</p>

<p>When the form is submitted, I wrote some javascript to cycle through each row, locate each row, and change the ids 'manager_[rownumber]' and 'department_[rownumber]'.</p>

<p>And then I submit the form.  My javascript code is below.</p>

<p>Based on debugging with alert popups, the ids are getting changed the way I want, but the servlet only ever receives one 'manager' parameter and one 'department' row number.</p>

<p>Why aren't all the inputs ('manager_1', 'manager_2', and so on) getting submitted?  Is there something I have to do after changing the ids to make sure the changes take effect before the submit of the form?</p>

<p>Thanks!</p>

<p>Rob</p>

<p>Here's my code:</p>

<pre><code>function submitForm() {
  correctInputIDs();
  document.myform.submit();
}

function correctInputIDs() {
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i&lt;rows.length; i++) {
    var row = rows[i];
    selectElements = rows.getElementsByTagName("select");
    for (var j=0; j&lt;selectElements.length; j++) {
      var selectElement = selectElements[j];
      if (selectElement.id == "manager") {
        selectElement.id = "manager_"+i;
      }
      if (selectedElement.id == "department") {
        selectElement.id = "department_"+i;
      }
    }
  }
}
</code></pre>
