I am trying to create a web form which is dynamically populated. I am trying to loop and create an array of combo controls to display data provided from a database. What I am doing seems to work, and all controls are displayed, and the correct value loaded. However, all but the most current combo no longer show up in $_POST variables when the form is submitted, and have no combo values except that which was loaded by setComboValue from php generated XML AJAX request.
I am creating the combos with something like the following loop:
for (var i = 0 ; i < lines ; i++) {
make[i].setComboValue(x.childNodes[i+1].childNodes[0].nodeValue);
model[i].setComboValue(x.childNodes[i+lines+1].childNodes[0].nodeValue);
status[i].setComboValue(x.childNodes[i+(2*lines)+1].childNodes[0].nodeValue);
createFields();
}
function createFields() {
idx=parseInt(document.form1.Lines.value);
document.getElementById(“divMake”).innerHTML += “<div id=“Make”+idx+”">";
document.getElementById(“divModel”).innerHTML += “<div id=“Model”+idx+”">";
document.getElementById(“divStatus”).innerHTML += “<div id=“Status”+idx+”">";
model[idx]=new dhtmlXCombo(“Model”+idx,“Model”+idx,200);
model[idx].enableFilteringMode(true,“load/loadModel.php”,true);
status[idx]=new dhtmlXCombo(“Status”+idx,“Status”+idx,200);
status[idx].enableFilteringMode(true,“load/loadStatus.php”,true);
status[idx].attachEvent(“onChange”,function(){
createFields();});
make[idx]=new dhtmlXCombo(“Make”+idx,“Make”+idx,200);
make[idx].enableFilteringMode(true,“load/loadMake.php”,true);
make[idx].attachEvent(“onChange”,function(){
model[idx].enableFilteringMode(true,“load/loadModel”+make[idx].getSelectedValue()+".php",true);
});
document.form1.Lines.value++;
}
Also, after subsequent combos are created, I can no longer do something like make[3].setComboValue(), unless index 3 is the most recently created control. It seems like the array is not properly retaining the index for any controls except for the most recently created. Any ideas on how to dynamically create combos without losing reference to everything but the most recent combo?
Problem caused by next lines
document.getElementById(“divMake”).innerHTML += “<div id=“Make”+idx+”">";
The += operation against inner HTML not add new element by replace ALL html , including already created combos, while HTML preserved all active code ( js actions, event handlers ) erased by such operation. You can use something similar to next
var t=document.createElement(“DIV”);
t.id=“Make”+idx;
document.getElementById(“divMake”).appendChild(t);
In such case adding of new element , will not corrupt already created ones.