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
5 answers
solution1
0 ACCPTED 2017-03-07 18:15:29
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>
solution2
0 2017-03-07 18:15:58
The onclick function should return false . Also addRow() needs to return false :
<form id="routes">
<button onclick="return addRow()">+</button>
</form>
solution3
0 2017-03-07 18:21:33
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>
solution4
0 2017-03-07 18:39:26
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>
solution5
0 2017-03-07 18:54:01
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.