表单内的两个相互冲突的按钮

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因此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，表单标记内的按钮的默认行为是提交。 要更改它，您应该明确定义type =“button”的buttong，或者您可以尝试阻止单击处理程序中的默认行为“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

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

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

<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);
}

这应该工作正常。