adding form elements with javascript - they won't submit

Question

This is similar to the problem here: .../questions/1386228/add-form-element-dynamically-using-javascript-not-submitting but I don't know what his answer was besides rewriting from scratch.

Here's my problem:

Form elements added dynamically to the page do not appear in the $_POST array. I'm doing this same method several other instances on the page and it works fine, i'm hoping there is just a typo or something obvious I am missing.

HTML

<tr valign="top">
<td></td>
<td align="right">Staff Comments:</td>
<td></td>
<td>

<select name="staffcomment0[scstid]">
<option value="">Choose</option>
<option value="10">Abs</option>
<option value="4">Andy</option>
</select> says:<br>
<TEXTAREA NAME="staffcomment0[desc]" ROWS="3" COLS="55" WRAP tabindex="99">Brilliant stuff</TEXTAREA><br><br>

<select name="staffcomment1[scstid]">
<option value="">Choose</option>
<option value="10">Abs</option>
<option value="4">Andy</option>
</select> says:<br>
<TEXTAREA NAME="staffcomment1[desc]" ROWS="3" COLS="55" WRAP tabindex="99">Great!</TEXTAREA><br><br>

<SPAN ID="staffcomments"></SPAN>

<A HREF="javascript:addComment()">add another comment</A></td>
</tr>

Javascript:

var commentNo = 2;

function addComment() {

outcHTML = "<select name='staffcomment" + commentNo + "[scstid]'><option value=''>Choose</option>";
outcHTML += "<option value='10'>Abs</option>";
outcHTML += "<option value='4'>Andy</option>";
outcHTML += "</select> says:<br><TEXTAREA NAME='staffcomment" + commentNo + "[desc]' ROWS='3' COLS='55' WRAP tabindex='99'></TEXTAREA><br><br>";

var newdiv = document.createElement("div");
newdiv.innerHTML = outcHTML;
var container = document.getElementById("staffcomments");
container.appendChild(newdiv);

commentNo++;
}

Added HTML but realised it is too long to be displayed properly!

Answer 1

When you're watching the DOM in Firebug, are the new elements actually inside the <form> element?

Answer 2

Your HTML is munged, so it's hard to know exactly what's going on, but I'm fairly certain the answer is that you're adding the elements as straight HTML, not as DOM objects.

In other words, instead of setting the innerHTML of newdiv, you have to append new objects to it, such as:

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="inputName";
newdiv.appendChild(newInput);

(Code typed off the top of my head, so apologies for any typos...)

And as another commenter noted, you have to also make sure that you append the new objects inside the form object in the DOM.

Answer 3

Maybe this post can help you: http://owahab.com/content/browsers-and-dynamically-generated-form-fields