javascript tutorial - [Solved-5 Solutions] How to prevent buttons from submitting forms - javascript - java script - javascript array
Problem:
How to prevent buttons from submitting forms
Solution 1:
You're using an HTML5 button element. Remember the reason is this button has a default behavior of submit, as stated in the W3 specification as seen here: W3C HTML5 Button So we need to specify its type explicitly:
<button type="button">Button</button>
click below button to copy the code. By JavaScript tutorial team
in order to override the default submit type. we just want to point out the reason why this happens =)
Solution 2:
Set the type on our buttons:
<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>
click below button to copy the code. By JavaScript tutorial team
...that'll keep them from triggering a submit action when an exception occurs in the event handler. Then, fix our removeItem() function so that it doesn't trigger an exception:
function removeItem() {
var rows = $('form tr');
if ( rows.length > 2 ) {
// change: work on filtered jQuery object
rows.filter(":last").html('');
$('form :hidden:last').val('');
} else {
alert('Cannot remove any more rows');
}
}
click below button to copy the code. By JavaScript tutorial team
- Note the change: our original code extracted a HTML element from the jQuery set, and then tried to call a jQuery method on it - this threw an exception, resulting in the default behavior for the button.
- FWIW, there's another way we could go with this... Wire up our event handlers using jQuery, and use the preventDefault() method on jQuery's event object to cancel the default behavior up-front:
$(function() // execute once the DOM has loaded
{
// wire up Add Item button click event
$("#AddItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of add logic
});
// wire up Remove Last Item button click event
$("RemoveLastItem").click(function(event)
{
event.preventDefault(); // cancel default behavior
//... rest of remove last logic
});
});
...
<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>
click below button to copy the code. By JavaScript tutorial team
- This technique keeps all of our logic in one place, making it easier to debug... it also allows we to implement a fall-back by changing the
typeon the buttons back tosubmitand handling the event server-side - this is known as unobtrusive JavaScript
Solution 3:
We agree with Shog9, though we might instead use:
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
click below button to copy the code. By JavaScript tutorial team
According to wikitechy, the <button> tag has different behavior on different browsers.
Solution 4:
Suppose our HTML form has id="form_id"
<form id="form_id">
<!--our HTML code-->
</form>click below button to copy the code. By JavaScript tutorial team
Add this jQuery snippet to our code to see result,
$("#form_id").submit(function(){
return false;
});
click below button to copy the code. By JavaScript tutorial team
Solution 5:
This is an html5 error like has been said, we can still have the button as a submit (if we want to cover both javascript and non javascript users) using it like:
<button type="submit" onclick="return false"> Register </button>
click below button to copy the code. By JavaScript tutorial team
This way we will cancel the submit but still do whatever we are doing in jquery or javascript function`s and do the submit for users who dont have javascript.