Generated fields do not appear in $_POST array

[dude1990]

Oh hi

I am creating an article editor. It is a form with text fields for entering the title, introduction, etc. It has a variable number of textareas for the body paragraphs; the user is given 1 textarea upon loading the page, and may create more textareas by pressing a [+] button that calls an parInsert() function.

Graphically, it looks like this:


//////TITLE FIELD//////
//////INTRO FIELD/////

//////TEXTAREA_1////
[+]



The parInsert() function is this:

parNum = 1; //keeping a running total of all textareas; starts at 1.
function parInsert()
{
parDivElement = document.getElementById('parDIV'); //this div holds the textareas
parNum ++; //increasing the running total
newParArea = document.createElement('textarea');
newParArea.setAttribute('name', 'par_' + parNum); //here, I set the name to par_#.
newParArea.setAttribute('spellcheck', 'false');
newParArea.setAttribute('cols', 30);
newParArea.setAttribute('rows', 5);
parDivElement.appendChild(newParArea);

}

This works well.

These textareas belong to a form with method='post' and action='process.php'.
Alas, when the user clicks SUBMIT, the $_POST array on process.php contains ONLY the 'title' and 'intro' fields; the textarea paragraphs, however, are NOT being posted over to the next page.

We see this here: on process.php, print_r($_POST) renders this:
Array ( [title] => This is the Title [intro] => The introduction is not very exciting. )

I need to know: why are these dynamically-generated textboxes not being registered into the $_POST array?

[bdl]

Since these aren't actual hardcoded elements in your markup, have you reviewed what the DOM generated markup looks like using Firebug or the Firefox "web developer" extension?

[Kor]

It is a wellknown IE bug (I bet you have tested in IE only). IE does not handle too well the name attribute in case of DOM new created elements. The workaround is:


...
var isIE=/*@cc_on!@*/false;//IE detector
var newParArea;
if(isIE){
newParArea=document.createElement('<textarea name="par_'+parNum+'">');
}
else{
newParArea = document.createElement('textarea');
newParArea.setAttribute('name', 'par_' + parNum)
}
// ... the rest of the code...