Two conflicting buttons inside a form

Question

So I have a <form> with one <input> element inside it.

I also have two buttons, <button onclick="addActivity()">Add Form</button><br> is to call the append() function. The other button which is <input type="submit" name="submit" value="submit"> is a submit button which will redirect me to display.php .

Why is it everytime I click <button onclick="addActivity()">Add Form</button><br> , it redirects me to display.php instead?

 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> 

It works when I transfer that button outside the <form> , but I want that button to appear above the submit 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 onclick="append()">Add Form</button><br> 

Is there any conflict with the code? Is there a better way to implement this in javascript?

Answer 1

Change it with :

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

and add:

e.preventDefault();

inside the append() function.

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

Answer 2

When type attribute us not defined with <BUTTON> it takes default behavior which submit thus form is submitted, So just add 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

You can try to add the type attribute to the button:

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

This tells that the button isn't for submitting or anything. You can also try and set

e.preventDefault() 

in the function:

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

Answer 4

In all browsers but older IE the default behaviour for buttons inside a form tag is to submit. To change that you should either define your buttong as of type="button" explicitly, OR you may try to prevent the default behaviour "e.preventDefault()" in your click handler

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> 

use this code it should work fine, notice the type attribute added to button element.

Answer 6

Your code is fine and you should just call the function with which name you are using and add type attribute as well.

This means in your function call you can change its name as you are using this name in the button.

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

This should work fine.