227

How do I prevent a form from submitting using jquery?

I tried everything - see 3 different options I tried below, but it all won't work: 

 $(document).ready(function() { //option A $("#form").submit(function(e){ e.preventDefault(); }); //option B $("#form").submit(function(e){ stopEvent(e); }); //option C $("#form").submit(function(){ return false; }); });

What could be wrong?

Update - here is my html:

 <form id="form" class="form" action="page2.php" method="post"> <!-- tags in the form --> <p class="class2"> <input type="submit" value="Okay!" /> </p> </form>

Is there anything wrong here?

Improve this question
3
  • Show your HTML because there is nothing wrong with preventDefault or return false as you posted it, other than your selector being totally wrong. Commented Feb 19, 2012 at 6:53
  • 1
    return false; after the .submit() worked for me! I was having the same issue Commented Sep 30, 2012 at 21:05
  • If there is a JavaScript error occuring in the handler the e.preventDefault(); code is not reached / executed. Commented Dec 2, 2019 at 21:43

16 Answers 16

Reset to default
327

Two things stand out:

  • It possible that your form name is not 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Something else is wrong. I am using this technique on a daily basis. Best guess would be that there are JavaScript errors on the page, perhaps check it with FireBug?
@LucyWeatherford, I have updated my answer with a sample that works. Maybe you spot someting.
In your update html I noticed that you have class attribute for your form. Change your JQuery selector from $('#form') to $('.form') for class attributes.
thanks! I ended up using your code on the same page, and it worked, still unsure what was wrong though, but it's all good now. thanks!
@ÂngeloRigo e is simply the name you give to the parameter, in this case it's the submit event.
|
43

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; });
Improve this answer

1 Comment

In my case, returning false was a key.
26

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.

Improve this answer

3 Comments

See this answer because jQuery handles these differently. stackoverflow.com/questions/1357118/…
Check this to understand event bubling quirksmode.org/js/events_order.html
The jQuery on API states: "Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }."
10

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; on onsubmit attribute.

Improve this answer

2 Comments

It is the difference between false; and return false;. You'd need to have onsubmit="return thefunction();"
This works well. but if we are using Content Security Policy, these inline scripts are not allowed
6

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;');
Improve this answer

1 Comment

Maybe it would be a little more comfortable to just remove the attribute when reverting the form submit prevention $('#form').removeAttr('onsubmit');
5

Attach the event to the submit element not to the form element. For example in your html do like this

$('input[type=submit]').on('click', function(e) { e.preventDefault(); });
Improve this answer

Comments

3

Prevent submitting form data and then release.

 $("form").on("submit", function (e) { e.preventDefault(); alert('Ok'); $( this ).unbind( 'submit' ).submit(); // Release });
  • It's working
Improve this answer

Comments

2

You may simply check if the form is valid if yes run submit logic otherwise show error.

HTML

<form id="form" class="form" action="page2.php" method="post"> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="text" class="check-validity" value="" /> <input type="submit" value="Okay!" /> </form>

Javascript

 $(document).ready(function () { var isFormValid = true; function checkFormValidity(form){ isFormValid = true; $(form).find(".check-validity").each(function(){ var fieldVal = $.trim($(this).val()); if(!fieldVal){ isFormValid = false; } }); } //option A $("#form").submit(function (e) { checkFormValidity("#form"); if(isFormValid){ alert("Submit Form Submitted!!! :D"); }else{ alert("Form is not valid :("); } e.preventDefault(); }); });
Improve this answer

Comments

2

Using jQuery, you can do the following:

  1. Use the native form submit event with a Submit button, while preventing the event from firing, then

  2. Check the form Valid property.

This can be implemented as following:

  1. HTML:

    <form id="yourForm"> <input id="submit" type="submit" value="Save"/> </form>

  2. JavaScript:

    $("form").on("submit", function (e) { e.preventDefault(); if ($(this).valid()) { alert('Success!'); } });
Improve this answer

Comments

1

You forget the form id, and it works 

$('form#form').submit(function(e){ e.preventDefault(); alert('prevent submit'); });
Improve this answer

Comments

1

When I am using <form> tag without the attribute id="form" and call it by its tag name directly in jquery it works with me.
your code in html file : 

<form action="page2.php" method="post">

and in Jquery script:

$(document).ready(function() { $('form').submit(function(evt){ evt.preventDefault();// to stop form submitting }); });
Improve this answer

Comments

1

$('#form') looks for an element with id="form".

$('form') looks for the form element

Improve this answer

Comments

1

This also appears to work and may be slightly simpler:

$('#Form').on('submit',function(){ return false; })
Improve this answer

Comments

1

The information is missing how to prevent the form submit and then revert the situation, i. e. allow the form submit later on.

Here is an example:

var savebtn_clicked; $('form#commentform').submit( function(e) { return savebtn_clicked; }); $('#savebtn').click( function() { savebtn_clicked = true; $('#form#commentform').submit(); });

In my case every button fired the form. With the code above I could control which button allowed the form to be submitted.

Improve this answer

Comments

0 
// Prevent form submission $( "form" ).submit(function( event ) { event.preventDefault(); });

from here: https://api.jquery.com/submit-selector/ (interesting page on submit types)

Improve this answer

Comments

-1 
<script> $("form").submit(function(e) { e.preventDefault(); var error = ""; if ($("#subject").val() == "") { error += "The subject filed is required.<br>"; } if ($("#message").val() == "") { error += "The content feed is required."; } if (error != "") { $("#error").html("<div class= 'alert alert-danger' role ='alert'><p><strong>There were error(s) in your form </strong></p>" + error + "</div>"); } else { $("form").unbind("submit").submit(); } }); </script>
Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.