Question

这与此处的问题类似：... / questions / 1386228 / add-form-element-dynamic-using-javascript-not-submitting但我不知道他的答案是什么，除了从头开始重写。< / p>

这是我的问题：

动态添加到页面的表单元素不会出现在$ _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

当您在Firebug中观看DOM时，新元素是否实际位于<form>元素中？

Answer 2

你的HTML已经存在，因此很难确切知道发生了什么，但我相当肯定答案是你将元素添加为直接HTML，而不是DOM对象。

换句话说，您不必设置newdiv的innerHTML，而是必须向其添加新对象，例如：

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

（代码排在我的头顶，所以对于任何拼写错误道歉......）

正如另一位评论者指出的那样，您还必须确保将新对象附加到DOM中的表单对象中。

使用javascript添加表单元素 - 他们不会提交

2 个答案: