Menu
The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME in your form. If you plan to call . submit() on the form AND the form has submit as id or name on any form element, then you need to rename that form element, since the form's submit method/handler is shadowed by the name/id attribute.
The simplest solution to prevent the form submission is to return false on submit event handler defined using the onsubmit property in the HTML <form> element.
getElementById("testForm"); form. addEventListener("submit",function(e){e. preventDefault(); return false;}); This solution will now prevent the user from submit using the enter Key and will not reload the page, or take you to the top of the page, if your form is somewhere below.
Use the return value of the function to stop the execution of a form in JavaScript. False would return if the form fails to submit.
Two things stand out:
form. Rather refer to
the tag by dropping the #.Also the e.preventDefault is the correct JQuery syntax, e.g.
//option A
$("form").submit(function(e){
e.preventDefault();
});
Option C should also work. I am not familiar with option B
A complete example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
//option A
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
});
});
</script>
</head>
<body>
<form action="http://google.com" method="GET">
Search <input type='text' name='q' />
<input type='submit'/>
</form>
</body>
</html>
You probably have few forms o the page and using $('form').submit() adds this event to the first occurrence of the form on your page. Use class selector instead, or try this:
$('form').each(function(){
$(this).submit(function(e){
e.preventDefault();
alert('it is working!');
return false;
})
})
or better version of it:
$(document).on("submit", "form", function(e){
e.preventDefault();
alert('it works!');
return false;
});
To prevent default/prevent form submission use
e.preventDefault();
To stop event bubbling use
e.stopPropagation();
To prevent form submission 'return false' should work too.
I also had the same problem. I also had tried what you had tried. Then I change my method not to use jquery but by using "onsubmit" attribute in the form tag.
<form onsubmit="thefunction(); return false;">
It works.
But, when I tried to put the false return value only in "thefunction()", it doesn't prevent the submitting process, so I must put "return false;" in onsubmit attribute. So, I conclude that my form application cannot get the return value from Javascript function. I don't have any idea about it.
I had the same problem and I solved this way (not elegant but it works):
$('#form').attr('onsubmit','return false;');
And it has the advantage, in my opinion, that you can revert the situation any time you want:
$('#form').attr('onsubmit','return true;');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With