title: how to change id of form elements before form gets submitted?
body: <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>