добавление элементов формы с помощью JavaScript - они не будут отправлять

Question

Это похоже на проблему здесь: ... / questions / 1386228 / add-form-element-dynamic-using-javascript-not-submiting, но я не знаю, что он ответил, кроме переписывания с нуля. 1001 *

Вот моя проблема:

Элементы формы, добавляемые динамически на страницу, не отображаются в массиве $ _POST. Я делаю этот же метод несколько других экземпляров на странице, и он работает нормально, я надеюсь, что есть просто опечатка или что-то очевидное, что мне не хватает.

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++;
}

Добавлен HTML, но понял, что он слишком длинный, чтобы отображаться правильно!

Answer 1

Когда вы смотрите DOM в Firebug, действительно ли новые элементы находятся внутри элемента <form>?

Answer 2

Ваш HTML создан, поэтому трудно точно знать, что происходит, но я вполне уверен, что ответ заключается в том, что вы добавляете элементы как простой HTML, а не как объекты DOM.

Другими словами, вместо установки innerHTML для newdiv, вы должны добавить к нему новые объекты, такие как:

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

(Код набран на моей голове, поэтому прошу прощения за любые опечатки ...)

И, как заметил другой комментатор, вы также должны убедиться, что вы добавляете новые объекты внутри объекта формы в DOM.