CODEWITHSUNDEEP
javascriptjqueryajaxformssymfony
lokiloq
lokiloq

Reputation: 304

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

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.

Upvotes: 0

Views: 876

Answers (1)

lokiloq
lokiloq

Reputation: 304

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

Upvotes: 1

Related Questions