Prevent form from submitting via event.preventDefault(); not working

Question

I'm using jQuery to submit my form variables, and im trying to prevent the form from submitting via the usual ways (click submit button or press enter on one of the fields)

i have this:

$('#form').submit(function(){
    event.preventDefault();
});

but it doesn't seem to work my form is still submitting, going to the process.php page..

Nombles

Not sure if this still an issue, but I had this and I couldn't fix it. Turns out I had a second form with the same ID... Silly me – Mouse

the reason your above code isn't working is because you don't have the event parameter as part of your callback function() argument, it should be function(event) – Vostok

Perhaps you refer a form before it is accessible through DOM. Put the code within onload callback, plus pass event argument to the callback for submit event. – Jochbed

Answer 1

If the only thing you need to do is to prevent the default action, you can supply false instead of a function:

$('#form').submit(false);

Thundery

What is the explanation for this? – Amoebaean

Not only does my ajax submit still occur when I do this but a full postback occurs as well whereas before a full postback did not occur. – Giro

Answer 2

I wasn't able to get the posted answers to work, and only supplying false was not an option for me. I found this to work:

$(document).on('submit', '#form', function(event){
    event.preventDefault();
});

Castiron

Thank you so much!!! This fixed the problem for me, I have no idea why the above wasn't working. – Ilo

I wasted my whole day on this... :( problem thank you for your solution !! it works ;) long live king! – Danilodanio

Answer 3

try return false instead of event.preventDefault() or accept event as a parameter of your function.

$('#form').submit(function(event){
  event.preventDefault();
});

Not sure why some people think this no longer works but here is an example showing it does still work.

https://jsfiddle.net/138z5atq/

Comment out the event handler and it will alert.

Regarding stopPropagation() and stopImmediatePropagation() they don't prevent the form from submitting at all. They just prevent the event from bubbling up the dom.

Piragua

As of now, neither return false nor event.preventDefault() work. – Thompson

If it's not working for you, try these ones as well, I was stuck on this for half an hour and it solved for me: e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); – Dialogism

Answer 4

Other way is:

$('#form').submit(function(){

   //some code here

   return false;
});

Klemens

if there is an $.ajax request in function body retruning false doesn't work.:( Any other workaround ? – Hazelwood

@ravi1991 just return false right after $.ajax() – Klemens

Answer 5

To extend on steveukx's answer I typically like to do something like this:

$('#form').submit(function(event){

    // The method's values go here

    event.preventDefault();

}, false); // This is a boolean (It converts all the values contained in the callback to a boolean value)

Stiver

Answer 6

As Damian Czapiewski pointed out in the comments:

Perhaps you refer a form before it is accessible through DOM. Put the code within onload callback, plus pass event argument to the callback for submit event.

My issue was indeed caused by trying to refer to my form before it was available. Moving my call within a jQuery ready check caused the preventDefault() to work.

$(document).ready(function(){
    $("#submitForm").submit(function(e) {
        console.log("Submitted")
        e.preventDefault(); // avoid to execute the actual submit of the form.    
    });
})

Phaih

Answer 7

I noticed also (at least on Chrome) that if You run e.preventDefault() after a Promise or an asynchronous function like this:

submitEvent(e) {

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });

    e.preventDefault(); // OPS. Executed but not working ????!!!
}

This previous won't work. You have to declare it ideally before any other code like this:

submitEvent(e) {

    e.preventDefault(); // WORKING !! :-)

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });
}

Symphysis

Answer 8

In my case, preventDefault was not working, as my modal containing a form was inside another form. So, effectively, it was a form within a form.

I fixed it by using react portals.

Mccloskey

This is not related to the subject matter of the original post, which is a question on how to prevent the default event from occuring when using jQuery. – Coiffeur