How to restrict page reloading after non-submitting button click on form?

Question

I'm trying to make a button on an HTML form add elements to the form:

function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    input.setAttribute("type", "Textbox");
    var time=document.createElement('input');
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}
function addRow(){
    console.log("z");
    var routes = document.getElementById("routes");
    routes.appendChild(createRow());
    return false;
}

<form id="routes">
    <button onclick="addRow()">+</button>
</form>

But on each button click the page reloads with a question mark added to url. I've found a pair of ideas:

preventDefault(e)
return false

but none worked.

Please tell me what shall I fix? Also there are some conditions:

This is not the submit button, which will be added later
It's required to keep it as simple as possible, the interface is not main focus of project

Possible duplicate of [How do I make an HTML button not reload the page](http://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page) — pvg, Mar 07 '17 at 18:20

score 0 · Accepted Answer · answered Mar 07 '17 at 18:15

0

The default behavior of button is to submit. Specify the type=button and it will override this default behavior.

<button type="button" onclick="addRow()">+</button>

answered Mar 07 '17 at 18:15

Rick S

6,476
5
29
43

score 0 · Answer 2 · answered Mar 07 '17 at 18:15

0

The onclick function should return false. Also addRow() needs to return false:

<form id="routes">
   <button onclick="return addRow()">+</button>
</form>

answered Mar 07 '17 at 18:15

Luca Jung

1,440
11
25

score 0 · Answer 3 · answered Mar 07 '17 at 18:21

Ok, there is example of using preventDefault on event listener.

 function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    var time=document.createElement('input');
    input.setAttribute("type", "Textbox");
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}

function addRow(){
    document.getElementById("routes").appendChild(createRow());
}

document.querySelector("button").addEventListener("click", function(event)
{
  event.preventDefault();
  addRow();
});

<form id="routes">
    <button>+</button>
</form>

score 0 · Answer 4 · answered Mar 07 '17 at 18:39

Inside of a form an HTML5 button element has a default type of submit. If you give it a type of "button" everything works fine

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 <form id="routes">
     <div><button type="button" onclick="addRow()">+</button></div>
 </form>
 <script type="text/javascript">
     function createRow(){
         var row = document.createElement('div');
         var input=document.createElement('input');
         input.setAttribute("type", "Textbox");
         var time=document.createElement('input');
         time.setAttribute("type", "Textbox");
         row.appendChild(input);
         row.appendChild(time);
         console.log(row);
         return row;
     }
     function addRow(){
         console.log("z");
         var routes = document.getElementById("routes");
         routes.appendChild(createRow());
         return false;
     }
 </script>
 </body>
 </html>

score 0 · Answer 5 · answered Mar 07 '17 at 18:54

Give button a id and put preventDefault inside $(document).ready(..) function

    $(document).ready(function(){
 
  $( "#routes_button" ).click(function( event ) {
   event.preventDefault();  
  });
 });
 
 function createRow(){
        var row = document.createElement('div');
        var input=document.createElement('input');
        input.setAttribute("type", "Textbox");
        var time=document.createElement('input');
        time.setAttribute("type", "Textbox");
        row.appendChild(input);
        row.appendChild(time);
        return row;
    }
    function addRow(){
        console.log("z");
        var routes = document.getElementById("routes");
        routes.appendChild(createRow());
        return false;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<form id="routes">
        <button id="routes_button" onclick="addRow()">+</button>
    </form>

How to restrict page reloading after non-submitting button click on form?

5 Answers5