表單內的兩個相互沖突的按鈕

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

這應該工作正常。