Why neither event.preventDefault() nor 'return false' stop my AJAX form submit action?

Question

When I submit a form with AJAX the event.preventDefault() of jQuery doesn't work.

Here is what my HTML code looks like:

<form method="post" action="my_post_create_url" id="post-form">
    <textarea id="post-text" placeholder="Compose a new post"></textarea>
    <button type="submit" id="submit-post">Post</button>
</form>

Here is my jQuery code:

$('#post-form').submit(function(e) {    
    e.preventDefault();
    var url = $(this).attr("action");
    $.ajax({
        type: "POST",
        url: url, // 'my_post_create_url'
        data: $(this).serialize(),
        dataType: "html",
        success: function(msg){

            alert("Success!");

        }
    }); 
});

And here is how I process it in my controller:

public function createAction(Request $request){
    // some code here ...
    $form->handleRequest($request);
    if ($form->isValid()) {
        // some code here ...
        // ... then redirection 
    }
    return $this->render(...)
}

I even tried the 'return false' at the end of the jQuery code but it still redirects me :(

EDIT 1 :

It seems $('#post-form').submit(function(e) does not trigger at all neither on Chrome nor on Safari, any further help?

EDIT 2 :

I have removed some javascript files in my base HTML file and it now works properly in all browsers. The problem is somewhere else in my js files.

I have no errors in my console and yes it's a local path @A.Wolff — lokiloq, Dec 10 '13 at 15:30
chrome (safari?) cannot access local file by default if not served by a server. So, are you running a server? — A. Wolff, Dec 10 '13 at 15:32
@user3035179 so this is not your issue i guess. I see it now, you have already posted server side code, my bad — A. Wolff, Dec 10 '13 at 15:34
possible duplicate of [event.preventDefault() does not work in Chrome and Opera](http://stackoverflow.com/questions/18389046/event-preventdefault-does-not-work-in-chrome-and-opera) — Liam, Dec 10 '13 at 15:39
try implementing the `error` function and see what error is thrown. `error: function (jqXHR, textStatus, errorThrown){alert(errorThrown);}` — th1rdey3, Dec 10 '13 at 17:43
@th1rdey3 No errors thrown, again I am just trying to avoid that default form action. But neither e.preventDefault() nor return false do the job :( — lokiloq, Dec 10 '13 at 18:04
you could also try jquery forms plugin http://malsup.com/jquery/form/ — th1rdey3, Dec 10 '13 at 18:17
another useful link http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting — th1rdey3, Dec 10 '13 at 18:24
Can you confirm that the handler was actually triggered? Put a log statement in there. Maybe you did not attach the listener correctly. Also check `console.log($('#post-form').length)` — Bergi, Dec 10 '13 at 18:36
@Bergi Yes I can confirm the handler was actually triggered because it redirects me after validation. — lokiloq, Dec 10 '13 at 18:52
@user3035179: What redirection? All you do is alerting "Success!". Please show your actual code if it differs from what you posted. — Bergi, Dec 10 '13 at 19:06
@Bergi I mean the redirection in my controller (after submission it validates), I will try your snippet as well. — lokiloq, Dec 10 '13 at 19:13
Remove `action="my_post_create_url"` from your `form`. The browser always follows through on the action, regardless of javascript. (At least this is how I remember solving a problem like this one) — Matt R, Dec 10 '13 at 19:23
@Bergi It looks like the handler is not triggered on Chrome but it works on Firefox. Why two different behaviours? (your snippet does not display anything, I checked it with the debugger) — lokiloq, Dec 10 '13 at 19:28
Are you attaching your submit handler after the DOM has loaded? If not, you may be attaching the handler to a non-existent form. — Jacob, Dec 10 '13 at 19:47
@Jacob Wow that's pretty much possible, but why only on chrome? — lokiloq, Dec 10 '13 at 19:49
You really should give a fiddle with your code - but in my experience with this issue, 99% of the time it is because the form doesn't exist when you try to attach the handler - so Jacob's comment about a non-existing form is probably right - I would try wrapping the code in a `$(function() {/*your code here*/});` — codefactor, Dec 10 '13 at 19:59
Did you include your js file after the form was rendered or wait for document ready? Becuase http://plnkr.co/edit/4ErH5C?p=preview is working properly. — Daiwei, Dec 10 '13 at 20:55
@Daiwei It actually does not work on Chrome, I don't know why... — lokiloq, Dec 10 '13 at 21:26
@user3035179 but I used this plnkr and works fine in Chrome. It might be caused from other part of the codes you included in the page. — Daiwei, Dec 10 '13 at 21:31
@Daiwei Yes the problem comes from another of my js files. I need to check each of them to find out whats wrong. Thanks all for your suggestions, its been very helpful. — lokiloq, Dec 10 '13 at 21:36
@user3035179 if attached other event handler to the submit button and prevented the default behavior, the form submit event will not be triggered. http://plnkr.co/edit/4ErH5C?p=preview — Daiwei, Dec 10 '13 at 21:45
@Daiwei Searching in all my js files, I just find out that problem probably come from $(window).on("popstate", function(e) {...}); I can not explain why for the moment. — lokiloq, Dec 10 '13 at 21:48

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

Well, the issue came from the window.popsate which behave differently depending on Chrome (and Safari) or Firefox (and Opera), here was the problematical line in one of my js files:

$(window).on("popstate", function(e) { ... });

And here is some answers for the problem for those who are facing the same issue: Popstate on page's load in Chrome

edited May 23 '17 at 12:31

Community

1
1

answered Dec 10 '13 at 22:19

lokiloq

194
2
10

Why neither event.preventDefault() nor 'return false' stop my AJAX form submit action?

EDIT 1 :

EDIT 2 :

1 Answers1