[Solved] Using JQuery – preventing form from submitting

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?

Solution #1:

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>
Respondent: Lucy Weatherford

Solution #2:

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;
});
Respondent: Philip Fourie

Solution #3:

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.

Respondent: Artem Kiselev

Solution #4:

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.

Respondent: The Alpha

Solution #5:

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;');
Respondent: Luki B. Subekti

Solution #6:

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

Solution #7:

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();
        });
    });
Respondent: M Weiss

Solution #8:

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
      });
 });
Respondent: Code Spy

Solution #9:

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

$('form') looks for the form element

Respondent: Noha Salah

Solution #10:

You forget the form id, and it works

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

Solution #11:

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

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

Solution #12:

This also appears to work and may be slightly simpler:

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

Solution #13:

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!');
        }
    });
Respondent: Ukuser32

Solution #14:

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.

Respondent: Mohamed Nagieb

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.