使用 JavaScript 动态添加字段使字段消失答案

【问题标题】：Adding fields dynamically using JavaScript makes fields disappear使用 JavaScript 动态添加字段使字段消失
【发布时间】：2013-03-02 16:17:53
【问题描述】：

这是我的 JS 代码：

<script language="javascript">
function addInput() {
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a1[]' size='60' />";
    document.getElementById('text').innerHTML += "<input type='text' value='' name='a2[]' size='9' /><br />";
}

function addInput1() {
    document.getElementById('text1').innerHTML += "<input type='text' value='' name='b[]' size='30' /><br />";
}

function addInput2() {
    document.getElementById('text2').innerHTML += "<input type='text' value='' name='c[]' size='30' />
}
</script>

这是我的 PHP 表单代码：

<form method="post" enctype="multipart/form-data" name="form1" >


<input type="submit" onclick="addInput()" name="add" value="Add Other" />
<div id="text"></div>

<input type="submit" onclick="addInput1()" name="add1" value="Add Other" />
<div id="text1"></div>

<input type="submit" onclick="addInput2()" name="add2" value="Add Other" />
<div id="text2"></div>

<input type="submit" name="submit" value="Submit" />
</form>

当我添加字段时，它工作得很好，但是当我尝试编辑字段时，页面重置并且所有添加的字段都消失了。

我的 JS 代码有问题吗？有没有其他方法可以做到这一点？

【问题讨论】：

离题，但elem.innerHTML += "...new content..." 具有很强的破坏性。虽然在某些情况下可能没有太大区别，但我建议避免这种做法。在您的情况下，它将删除正在被销毁的输入的值。

标签： php javascript jquery forms

【解决方案1】：

您正在使用提交按钮来添加输入，但提交按钮可以更好地提交表单以使用按钮输入，例如

<input type="button">

【讨论】：

非常感谢您的回答：D。没想到会很简单。 :D。非常感谢您的帮助：D

【解决方案2】：

提交按钮用于提交表单。最好使用按钮，但返回false 将停止按钮的默认行为。例如：

function addInput() {
  // your code
  return false;
}

在 html 上：

<input type="submit" onclick="return addInput()" name="add" value="Add Other" />

【讨论】：

感谢您的回答：D。这很有帮助。非常感谢您的帮助。再次感谢：D