dynamic element created not POSTed - php

Question

I create an HTML select element dynamically after a user choice is made from another select element. However the PHP script for inspecting the form does not recognise the new element and is indicating it null:
Here is snippets:
some.js:
if(document.getElementById(firstselect).value=='somvalue'){
document.getElementById(gamsDiv).removeChild(gamsElem);
gamsElem = document.createElement("select");
gamsElem.id = "FacilityGamsId";
gamsElem.name = "FacilityGamsId";
gamsElem.setAttribute("onChange", "updateHidden(this);makeUpdateRequest(arguments[0],this)");
opt = document.createElement("option");
opt.text="Select one ";
opt.value=0;
gamsElem.options.add(opt);
.....some other stuff
.....
document.getElementById(gamsDiv).appendChild(gamsElem);
}
the php script:
if($_POST){
var_dump($_POST['FacilityGamsId'];
}
result: null
Is there any reason why the server post action does not recognise ANY of my dynamic HTML elements from js script. If I examine/inspect the newly created elements, the name and id are exactly same.
Any Help is high appreciated ;) . Thanks

Answer 1

It's not added to the form stored in the DOM of the browser.
This guy was trying to do the same: dynamic element created not POSTed
A solution would be to build the dynamic form server-side -- if it really needs to be client-side, I think you need to manipulate the form (stored in document.forms) in addition to the DOM.

Answer 2

Here:
gamsElem.options.add(opt);
add is a method of the select element interface, not options (which is an HTMLElement Collection and doesn't have an add method). So:
gamsElem.add(opt);
should fix the issue.
Note that gamsElem.add(opt); does not work in Mozilla firefox 6 so I reverted to my old code of gamsElem.options.add(opt).
And:
gamsElem.setAttribute("onChange",
"updateHidden(this);makeUpdateRequest(arguments[0],this)");
would be better as:
gamsElem.onchange = function() {
updateHidden(this);
makeUpdateRequest(arguments[0], this);
};
though I have no idea what arguments[0] should reference.
Here is how this would be done normally (though the button would call a function rather than have a slab of inline code, I've done it that way for convenience only):
<form action="">
<div id="div0">
<select id="sel0" name="sel0">
<option>option 0
</select>
<input type="submit">
</div>
</form>
<button onclick="
var div = document.getElementById('div0');
var sel = document.getElementById('sel0');
div.removeChild(sel);
sel = document.createElement('select');
sel.id = 'sel1';
sel.name = 'sel1';
sel.onchange = function(){alert(this.value);};
sel.options[0] = new Option('Select one', '0');
sel.options[1] = new Option('Select two', '1');
div.appendChild(sel);
">Replace select</button>
A second option is needed to get the onchange listener to fire.
If you want to replace one element with another, create the new element then just replace the old one:
<button onclick="
var oldSel = document.getElementById('sel0');
var sel = document.createElement('select');
sel.id = 'sel1';
sel.name = 'sel1';
sel.onchange = function(){alert(this.value);};
sel.options[0] = new Option('Select one', '0');
sel.options[1] = new Option('Select two', '1');
oldSel.parentNode.replaceChild(sel, oldSel);
">Replace select</button>
Or you can just replace the options (set the select's options.length to zero and just add the new ones).

Answer 3

You have to add a new element into your FORM tag

Answer 4

Run this code after the DOM is ready, preferably $.ready() in jquery.
and also put the quotes aroun div name ("gamsDiv")