Question

我需要一个可以包含多个输入字段的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>

Answer 1

按Enter键将提交表单。

提交事件处理程序将运行，然后将表单内容发送到操作指定的URL（由于没有操作，因此为当前URL）。

这将加载一个新页面。

由于没有任何操作，因此新页面是全新的，未经JS修改，是当前页面的副本。

避免使用内在事件属性，例如onsubmit。请改用JavaScript event binding。了解Event object及其preventDefault method。

Answer 2

那是因为您的表单已提交。表单用于将数据提交到另一页，因此可以处理输入的数据。您不需要这样做，而是希望阻止使用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>

我还建议避免使用onclick，onsubmit等HTML属性。请改用EventListener。

表单提交后文件初始化

2 个答案: