Hi guys,

My problem: I have a form where elements are added dynamically using javascript. Let's say I add three new elements (id's : 1,2 and 3) and submit form to processing page. It all goes perfectly fine. Now if I add three new elements(same id's : 1,2 and 3) , then delete the middle one and using javascript update the id's (1 remains 1, 2 is deleted therefore 3 becomes 2). After submitting form it says element 2 is not recognised and 3 still exists, however after running javascript in the initial page to check element id's it all goes well and both updated id's are recognised as should be. Where is it all going wrong?

some code:

functions to add and delete elements (fees):

var numbFees = 0;
  function addFee(tableID,whichFee) {
  
   var table = document.getElementById(tableID);
   if (whichFee == 1){
   var dropdownIndex = document.getElementById('fees_select').selectedIndex;
   var myGroup = document.getElementById('fees_select')[dropdownIndex].value;
   }
   else{
   var myGroup = document.getElementById('new_fee').value;
   }
   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
  
   var cell1 = row.insertCell(0);
   cell1.style.verticalAlign = "top";
   var element1 = document.createElement("input");
   element1.type = "checkbox";
   cell1.appendChild(element1);

   var cell2 = row.insertCell(1);
   cell2.style.verticalAlign = "top";
   cell2.innerHTML = rowCount;

   var cell3 = row.insertCell(2);
   var element2 = document.createElement("input");
   element2.type = "text";
   element2.id = "feename_" + rowCount;
   element2.name = "feename_" + rowCount;
   element2.value = myGroup;
   element2.style.width = 190;
   element2.setAttribute('onBlur', 'checkStep(5)');
   cell3.appendChild(element2);
  
   var cell4 = row.insertCell(3);
   var element3 = document.createElement("input");
   element3.type = "text";
   element3.id = "fee_" + rowCount;
   element3.name = "fee_" + rowCount;
   element3.style.width = 80;
   element3.setAttribute('onBlur', 'feesFormat(this,5)');
   cell4.appendChild(element3);
  
   var cell5 = row.insertCell(4);
   var element4 = document.createElement("select");
   var optn = document.createElement("option");
   optn.text = "per hour";
   optn.value = "per hour";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per day";
   optn.value = "per day";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per week";
   optn.value = "per week";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per forthnight";
   optn.value = "per forthnight";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per month";
   optn.value = "per month";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per year";
   optn.value = "per year";
   element4.options.add(optn);
   var optn = document.createElement("option");
   optn.text = "per course";
   optn.value = "per course";
   element4.options.add(optn);
   element4.style.width = 120;
   element4.id = "period_" + (rowCount);
   element4.name = "period_" + (rowCount);
   element4.setAttribute('onBlur', 'checkStep(5)');
   cell5.appendChild(element4);
   numbFees++;
   document.getElementById('numbFees').value = numbFees;
   checkStep(5);
  }

  function deleteFee(tableID) {
   try {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;

   for(var i=1; i<rowCount; i++) {
    var row = table.rows;
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
     table.deleteRow(i);
     var myRow = i;
     var myCount = table.rows.length;
     for (myRow; myRow <= myCount - 1; myRow++){
     table.rows[myRow].cells[1].innerHTML = myRow;
     var myElement = document.getElementById("feename_" + (myRow + 1));
     myElement.id = "feename_" + (myRow);
     myElement = document.getElementById("fee_" + (myRow + 1));
     myElement.id = "fee_" + (myRow);
     myElement = document.getElementById("period_" + (myRow + 1));
     myElement.id = "period_" + (myRow);
     }
     numbFees--;
     document.getElementById('numbFees').value = numbFees;
     rowCount--;
     i--;
    
    }
    checkStep(4);
   }
   }catch(e) {
    alert(e);
   }
  }

Now when I submit form I get the following error:

Element feename_2 is undefined in a Java object of type class coldfusion.filter.FormScope.

Please help me out