Using JQuery - preventing form from submitting

Question

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?

Show your HTML because there is nothing wrong with preventDefault or return false as you posted it, other than your selector being totally wrong. — Sparky, Feb 19 '12 at 06:53
`return false;` after the `.submit()` worked for me! I was having the same issue — d-_-b, Sep 30 '12 at 21:05
If there is a JavaScript error occuring in the handler the `e.preventDefault();` code is not reached / executed. — Tom, Dec 02 '19 at 21:43

score 323 · Accepted Answer · edited Oct 13 '16 at 19:41

323

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>

edited Oct 13 '16 at 19:41

Arijit Mukherjee

3,817
2
31
51

answered Feb 19 '12 at 06:36

Philip Fourie

111,587
10
63
83

3

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? – Philip Fourie Feb 19 '12 at 06:58
@LucyWeatherford, I have updated my answer with a sample that works. Maybe you spot someting. – Philip Fourie Feb 19 '12 at 07:23
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. – Philip Fourie Feb 19 '12 at 07:30
nice catch, but i had an id as well, i just deleted it meanwhile and changed the selector to ("form") as you suggested. Anyhow I tried now (".form") and it didn't work either... – Lucy Weatherford Feb 19 '12 at 07:58
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7906/discussion-between-philip-fourie-and-lucy-weatherford) – Philip Fourie Feb 19 '12 at 08:02
1

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! – Lucy Weatherford Feb 19 '12 at 08:16
2 things that may have solved this: 1. I moved the js to the same page (maybe something was getting in the way). 2. I deleted various other js I had on the page which may have been getting in the way as well. Now it works. yay! – Lucy Weatherford Feb 19 '12 at 08:31
Here it is working for me using e: function(e) and e.preventDefault(e); how does "e" work´s it stands for exception? – Ângelo Rigo Jun 20 '16 at 14:28
1

@ÂngeloRigo e is simply the name you give to the parameter, in this case it's the submit event. – squall3d Jul 01 '16 at 15:53
thing is its working for restriction, but it don't when i want to submit the from – Habib Rehman Jun 14 '17 at 15:57
I have tried with your solution, but form is still being submitted. – Kamlesh Sep 07 '19 at 07:21

score 43 · Answer 2 · edited Apr 03 '18 at 17:07

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;
});

edited Apr 03 '18 at 17:07

Lewis James-Odwin

1,019
7
6

answered Feb 15 '14 at 11:24

Artem Kiselev

643
1
7
7

1

In my case, returning false was a key. – elquimista Mar 04 '16 at 02:27

score 26 · Answer 3 · edited May 20 '19 at 05:39

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.

edited May 20 '19 at 05:39

Jens

8,423
9
58
78

answered Feb 19 '12 at 06:39

The Alpha

143,660
29
287
307

See this answer because jQuery handles these differently. http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Sparky Feb 19 '12 at 06:51
1

Check this to understand event bubling http://www.quirksmode.org/js/events_order.html – The Alpha Feb 19 '12 at 06:54
3

The [jQuery on](http://api.jquery.com/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; }`." – Paul Aug 21 '15 at 19:05

Luki B. Subekti · Answer 4 · 2022-05-09T07:52:17.940

9

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.

edited May 09 '22 at 07:52

answered Aug 23 '13 at 08:14

Luki B. Subekti

822
10
9

1

It is the difference between `false;` and `return false;`. You'd need to have `onsubmit="return thefunction();"` – xr280xr Jun 30 '20 at 22:30

score 6 · Answer 5 · answered Aug 31 '16 at 15:33

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;');

answered Aug 31 '16 at 15:33

vinxxe

61
1
1

1

Maybe it would be a little more comfortable to just remove the attribute when reverting the form submit prevention `$('#form').removeAttr('onsubmit');` – barbieswimcrew Jun 01 '17 at 05:27

score 5 · Answer 6 · answered Sep 04 '18 at 17:15

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();
});

answered Sep 04 '18 at 17:15

M Weiss

51
1
1

score 2 · Answer 7 · answered Oct 05 '18 at 10:44

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();
        });
    });

score 2 · Answer 8 · edited Nov 03 '22 at 19:37

Using jQuery, you can do the following:

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

This can be implemented as following:

HTML:

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

JavaScript:

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

score 1 · Answer 9 · answered Apr 23 '14 at 12:57

1

You forget the form id, and it works

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

answered Apr 23 '14 at 12:57

Shintadoniku Alyssa

19
1

Noha Salah · Answer 10 · 2018-02-23T16:23:35.663

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
      });
 });

edited Feb 23 '18 at 16:23

answered Jul 12 '17 at 09:57

Noha Salah

493
1
7
11

score 1 · Answer 11 · answered Dec 16 '19 at 15:10

1

This also appears to work and may be slightly simpler:

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

answered Dec 16 '19 at 15:10

Ukuser32

2,147
2
22
32

score 1 · Answer 12 · answered Feb 04 '21 at 15:26

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.

score 1 · Answer 13 · answered Sep 13 '22 at 18:08

1

Prevent submitting form data and then release.

  $("form").on("submit", function (e) {
   e.preventDefault();
   alert('Ok');
   $( this ).unbind( 'submit' ).submit(); // Release 
  });

It's working

answered Sep 13 '22 at 18:08

Subroto Biswas

553
7
5

score 1 · Answer 14 · edited May 20 '19 at 05:40

1

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

$('form') looks for the form element

edited May 20 '19 at 05:40

Jens

8,423
9
58
78

answered Feb 19 '12 at 07:57

Rahul

1,866
17
32

score 0 · Answer 15 · answered Nov 18 '17 at 13:20

0

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

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

answered Nov 18 '17 at 13:20

Chris Strong

1

Using JQuery - preventing form from submitting

15 Answers15

Linked

Related