Javascript updated element id not submitted by cfform

[Simon.Dau]

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

[Reed_Powell-ttnmOb]

Please clarify the point at which you are getting the CF error message.  Are you saying that it occurs at the very beginning of your form processing page (ie, before it starts executing your code)?  Try putting a <CFDUMP var="#form#"><cfabort> at the top of your form processing page, and look at what CF is seeing as the form scope's contents.

[Simon.Dau]

Hi Reed,

It's been a long time since I've posted this question

the error appears when I submit form to processing page. So let's say the first field was added, then the second one and then third one. After that I've deleted second one and renamed the third one to be the second one. So what comes up in the action page is the first record and the mistake that the second one is not defined (which gives me impression that I can delete form fields using javascript, but when renamed they actually not changing somehow)

If I do cfdump it does output only first and third fields, second one is non existing.

[ilssac]

S. Daukantas wrote:

If I do cfdump it does output only first and third fields, second one is non existing.

That tells me that the JavaScript logic you are using to "delete the second one and rename the third one to be the second one" is not doing what you think it is doing.

[ilssac · Accepted solution]

Looking at your code, it looks like this is what you are using the change the form elements:  myElement.id = "feename_" + (myRow); and similar lines.

The ID property is not the property that names a form element on the action page.  Its main purpose is to provide a convient connection to elements for JavaScript and CSS.  The NAME property is the property that determines what the form fields are going to be called on the action page.

[Simon.Dau]

Hey Ian,

THANK YOU THANK YOU THANK YOU THANK YOU!!!! dunno how I missed on that during the million tests of different combinations I've made but it works. It's weird as element's id is the main factor while using javascript, and element's name is something that is essential for coldfusion to process form.

thanks again!

cheers

Simon

[ilssac]

S. Daukantas wrote:

It's weird as element's id is the main factor while using javascript, and element's name is something that is essential for coldfusion to process form.

Whether you consider it wierd or not, it is the way the HTTP standard is written.  Thus it is the way ALL server side code is going to process the form, whether the server is using ColdFusion, .NET, PHP, CGI or anything.

Forms are older then JavaScript.  When forms where introduced to HTTP there was no ID property, just the NAME property.

[Dan_Bracuk]

If you are adding form elements with js, your action page should refer to the formfields with a static part and variable part.  That way you don't have to worry about what numbers are there and which ones are not.

My approach is to do stuff like this:

<cfloop list="#form.fieldnames#" index="ThisElement">
<cfif left(ThisElement, 12) is "NewResource_">
<cfif len(form[ThisElement]) gt 0>
code for adding record

dot, dot, dot

<cfelseif left(ThisElement, 9) is "resource_">
<!---
Form Fields are Resource and Show, followed by the id.  There is another set with the string "old" in front.
Update anything that has changed
--->
<cfset ThisID = RemoveChars(ThisElement, 1, 9)>

<cfif form["Resource_" & ThisID] is not form["oldResource_" & ThisID]
or form["Show_" & ThisID] is not form["oldShow_" & ThisID]
>

code for updating records

etc

[Simon.Dau]

Hi Dan,

Thanks for your answer. I'll try to look into it asap

cheers,

Simon