如何在提交表单之前更改表单元素的ID？

Question

I have a table with many rows and each row has select lists. Something like this:

| USER    | MANAGER            | DEPARTMENT   |

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

| Sue     | [Bob Jones |V]     | [Support |V] |

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

I simplified things considerably by giving every manager selector id 'manager', and every department selector id 'department'.

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]'.

And then I submit the form. My javascript code is below.

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.

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?

Thanks!

Rob

Here's my code:

function submitForm() {
  correctInputIDs();
  document.myform.submit();
}

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

Answer 1

Because IDs don't matter with form submission, name s do.

Happy Reading