jquery post not working with HTML form - php

Question

I am a beginner in Ajax and trying to build a simple ajax sample with jquery.
For some reason, my $.post is not working if I am putting my submit button in form tag.
Here is my creat_user.php:
<?php
$user_login = $_REQUEST['login_name'];
echo $user_login;
?>
Here is my html:
<form id='create_user_form'>
<p><label>Login Name : </label><input type='text' name = 'login_name'></p>
<p><label>Password : </label><input type='password' name='login_pw'></p>
<p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
<p><label>Email : </label><input type='email' name='email'></label></p>
<p><label>Date of Birth : </label><input type='date' name='date'></p>
<p><input type='submit' name='submit' id='create' value='create'></p>
</form>
And jquery:
$(document).ready(function(){
$("#create_user_form").submit(function(){
var serialize = $(this).serialize();
alert('Here');
$.post("create_user.php",serialize,function(response){
alert('Here2');
alert(response);
console.log("Response: "+response);
});
});
});
For some reason, the alert('Here2') is never fired, but it will work if I move the submit button out from the form tag, it works.(I do changed the selector in jquery code and changed submit() to click() ):
<form id='create_user_form'>
<p><label>Login Name : </label><input type='text' name = 'login_name'></p>
<p><label>Password : </label><input type='password' name='login_pw'></p>
<p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
<p><label>Email : </label><input type='email' name='email'></label></p>
<p><label>Date of Birth : </label><input type='date' name='date'></p>
</form>
<p><input type='submit' name='submit' id='create' value='create'></p>
SO, is that anything wrong from my code makes .post() not working if I put the submit button into form tag?

Answer 1

Maybe you need add
return false;
at the submit event?

Answer 2

You're missing return false or preventDefault() in the submit handler:
$("#create_user_form").submit(function(){
...
return false;
});
Or
$("#create_user_form").submit(function(e){
e.preventDefault();
...
});
This will prevent the browser from submitting the form after the ajax request is sent.

Answer 3

The default form submit is occurring prior to the Ajax call returning. You should prevent the default action of the form.
$(document).ready(function(){
$("#create_user_form").submit(function(e){
e.preventDefault(); //do not submit the form.
var serialize = $(this).serialize();
alert('Here');
$.post("create_user.php",serialize,function(response){
alert('Here2');
alert(response);
console.log("Response: "+response);
});
});
});