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.