How to check live availability of form fields using jquery ajax in php

Question

Actually I am creating a validation using jquery in PHP and O did username and email availability. My username and email checking is doing well but problem is that when I am submitting the form it does not insert into my database and doesn't show me message. Here is the code:

HTML CODE

<form name="signup" id="signup">
<p><input type="text" id="username" name="username" /></p>
<span class="feedback1"></span>
<p><input type="password" id="password" name="password" /></p>
<span class="feedback2"></span>
<p><input type="text" id="email" name="email" /></p>
<span class="feedback3"></span>
<p><span class="span-submit"><input type="submit" name="submit" id="submit" value="Register"/></span></p>
 <span class="feedback4"></span>

JQUERY CODE

$(document).ready(function(){

$("#username").val("username").addClass("watermark");

$("#password").val("password").addClass("watermark");

$("#email").val("email").addClass("watermark");

 //Validation for username

function validate_name(name){

   $.post("username_check.php",{username:signup.username.value},function(data){
        $(".feedback1").text(data);
    });
}
$("#username").focusin(function(){
    if($.trim($(this).val())=="username"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback1").text("please type your name.");
    }
    else{
        validate_name($("#username").val());
    }
}).focusout(function() {
    if($("#username").val()==""){
        $(this).val("username");
        $(this).addClass("watermark");
        $(".feedback1").text("");
    }
});
$("#username").keyup(function(){
    name=$("#username").val();
    if(name.length<5){
        $(".feedback1").text("Please type in your name above 5 characters.");
    }
    else{
        validate_name($("#username").val());
    }
});
//validation for password
$("#password").focusin(function(){
    if($.trim($(this).val())=="password"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback2").text("please type your password.");
    }
}).focusout(function() {
    if($("#password").val()==""){
        $(this).val("password");
        $(this).addClass("watermark");
        $(".feedback2").text("");
    }
});
$("#password").keyup(function(){
    name=$("#password").val();
    if(name.length<8){
        $(".feedback2").text("Please type in your password above 8 characters.");
    }
    else{
        $(".feedback2").text("Password is accepted.");
    }
});
//validation for email
function validate_email(email){
    $.post("email_check.php",{email:email},function(data1){
        $(".feedback3").text(data1);
    });
}
$("#email").focusin(function(){
    if($.trim($(this).val())=="email"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback3").text("please type your email.");
    }
    else{
        validate_email($("#email").val());
    }
}).focusout(function() {
    if($("#email").val()==""){
        $(this).val("email");
        $(this).addClass("watermark");
        $(".feedback3").text("");
    }
});
$("#email").keyup(function(){
        validate_email($("#email").val());
});
//submit the form
$("#submit").click(function(e){
    var data = 'username=' + $("#username").val() + '&password=' + $("#password").val() + '&email=' + $("#email").val();
    $.ajax({
        type:'POST',
        url:'index_db.php',
        cache:false,
        data:data,
        success: function(data){
            $(".feedback4").text(data);
        }
    });
    return false;
});

});

PHP CODE

require_once "db_function.php";
$username=mysql_real_escape_string($_POST["username"]);
$password=mysql_real_escape_string($_POST["password"]);
$email=mysql_real_escape_string($_POST["email"]);
$username_trim=trim($username);
$password_trim=trim($password);
$email_trim=trim($email);
$query="select * from userdata where name='$username'";
$result=mysql_query($query);
$rw=mysql_fetch_row($result);
if(empty($username_trim) && empty($password_trim) && empty($email_trim)){
    echo "OOPS! You must filled up all fields.";
}
else if(empty($username_trim)){
    echo "Username must not be blank.";
}
else if(!preg_match("/^([a-zA-Z])+([ a-zA-Z]){4,20}+$/",$username_trim)){
        echo "More than 5 and less than 20 char required.";
}
else if($rw>0){
        echo "the username is already been taken";
}
else if(!preg_match('/^([a-zA-Z]{8,14})+$/',$password_trim)){
        echo "Please put password in the range of 8 and 12";
}
else if(empty($email_trim)){
    echo "Email must not be blank.";
}
else if(!preg_match('/^([a-zA-Z0-9_-])+([\.a-zA-Z0-9_-])*@([a-z0-9-])+(\.[a-z0-9-]+)*\.([a-z]{2,6})+$/',$email_trim)){
    echo "Please put correct email format";
}
else{
$password_en=md5($password_trim);
mysql_query("insert into userdata values('$username_trim','$password_en','$email_trim')");
$x=mysql_affected_rows();
if($x==0){
    echo "Hello";

}
else{
    echo "Failed.";
}
}

Please tell me how could I submit these value into database and get redirected to another page.

Answer 1

the whole point of using jquery submit is to not get redirected to another page even when you submit. If you want the page to submit to another page and redirect then just use

<form name="signup" id="signup" action="index_db.php">

and remove your jquery submit event