Question

所以我有一个<form>，里面有一个<input>元素。

我还有两个按钮，<button onclick="addActivity()">Add Form</button><br>用于调用append()函数。另一个按钮<input type="submit" name="submit" value="submit">是一个提交按钮，它将把我重定向到 display.php 。

为什么每次我单击<button onclick="addActivity()">Add Form</button><br>时，它将重定向到 display.php ？

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>

  <button onclick="append()">Add Form</button><br>
  <input type="submit" name="submit" value="submit">
</form>

当我将按钮转移到<form>之外时可以使用，但是我希望该按钮显示在“提交”按钮上方。

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>

  <input type="submit" name="submit" value="submit">
</form>
<button onclick="append()">Add Form</button><br>

代码是否有冲突？有没有更好的方法可以在javascript中实现呢？

Answer 1

使用：

进行更改

<input type="button" onclick="append()" value="Add Form" />

并添加：

e.preventDefault();

在append（）函数内部。

function append(){
  e.preventDefault();
  // your code
}

Answer 2

当type属性没有用<BUTTON>定义时，它采用默认行为，即submit从而提交了form，因此只需添加type="button"

<button type="button" onclick="append()">Add Form</button>

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>

  <input type="submit" name="submit" value="submit">
</form>
<button type="button" onclick="append()">Add Form</button><br>

Answer 3

您可以尝试将type属性添加到按钮：

<button onclick="append()" type="button">Add Form</button>

这表明该按钮不用于提交或其他任何操作。您也可以尝试设置

e.preventDefault()

在功能中：

append(e) {
  e.preventDefault();
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

Answer 4

在除旧版IE之外的所有浏览器中，表单标签内按钮的默认行为是提交。要进行更改，您应该显式地将buttong定义为type =“ button”，或者您可以尝试阻止点击处理程序中的默认行为“ e.preventDefault（）”

Answer 5

function append() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

<form class="" action="display.php" method="post">
  <div id="activity-div" class="activity-div">
    Choose a number:<br>
    <input type="number" name="num" min="0" max="10"><br>
  </div>
  <button type="button" onclick="append()">Add Form</button><br>
  <input type="submit" name="submit" value="submit">
</form>

使用此代码应该可以正常工作，请注意将type属性添加到了按钮元素。

Answer 6

您的代码很好，您应该只使用您使用的名称调用该函数，并添加type属性。

这意味着在函数调用中，您可以在按钮中使用该名称时更改其名称。

<button onclick="addActivity()" type="button">Add Form</button><br>

function addActivity() {
  var newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "number");
  document.getElementById("activity-div").appendChild(newInput);
}

这应该很好。

表单内的两个冲突按钮

6 个答案: