表单提交后文档初始化

汤米梦魇

我需要一个可以包含多个输入字段的 HTML 文档。从一个字段开始，提交应创建另一个输入字段作为其自身的副本。所以我用 HTML 代码声明它并编写了一个函数来将它的一个副本附加到我的 div 中。出于测试目的，我也制作了一个按钮来调用我的 js 函数。

现在我很困惑，因为单击按钮将创建一个新字段，在字段内按 Enter 将初始化我的 HTML 文档，删除以前创建的字段。

有人能弄清楚为什么吗？

亲切的问候，汤米

<button onclick="createRow()">New row</button>

    <div id="criteriaTableBody">
            <div class="tr" id="criteriaRow">
                <div class="td">
                    <form onsubmit="createRow()">
                        <input type="text" name="text" value="">
                    </form>
                </div>
            </div>
    </div>

<script>
function createRow() {

    var row = document.getElementById("criteriaRow");
    var newRow = row.cloneNode(true);

    document.getElementById("criteriaTableBody").appendChild(newRow);

}
</script>

代码F0x

那是因为你的表单提交了。表单用于将数据提交到另一个页面，因此可以处理输入的数据。您不希望这样，而是希望防止表单使用Event.preventDefault().

function createRow(event) { // Mind "event" here
  // Prevent form from submitting (reloading the page and deleting your "progress")
  event.preventDefault();

  var row = document.getElementById("criteriaRow");
  var newRow = row.cloneNode(true);

  document.getElementById("criteriaTableBody").appendChild(newRow);

}

<button onclick="createRow(event)">New row</button> <!-- Pass event here! -->

<div id="criteriaTableBody">
  <div class="tr" id="criteriaRow">
    <div class="td">
      <form onsubmit="createRow(event)"> <!-- Pass event here! -->
        <input type="text" name="text" value="">
      </form>
    </div>
  </div>
</div>

我还建议避免像HTML属性onclick，onsubmit等使用的EventListener替代。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。