Submit Register Form without refreshing the page

<!---- index.php page---->

<html>
 <body>
 <!------making jquery library's link --->
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 function validate()
 {
 //--------value of fields ---------
 var name = document.getElementById("name").value;
 var email = document.getElementById("email").value;
 var phone = document.getElementById("phone").value;
 
 //------ error fields are identified first --------
 var error_name_id = document.getElementById("error_name");
 var error_email_id = document.getElementById("error_email");
 var error_phone_id = document.getElementById("error_phone");
 var error_msg = document.getElementById("error_msg");
 var success_msg = document.getElementById("success_msg");
 
 //---Making all error field first Blank
 error_name_id.innerHTML ="";
 error_email_id.innerHTML ="";
 error_phone_id.innerHTML ="";
 
 //--------Form Validation to check blank fields -------
 if(name == null || name == "" || name == " ")
 {
 error_name_id.innerHTML ="Name is Empty";
 }
 else if(email == null || email == "" || email == " ")
 {
 error_email_id.innerHTML ="Email is Empty";
 }
 else if(phone == null || phone == "" || phone == " ")
 {
 error_phone_id.innerHTML ="Phone is Empty";
 }
 else
 {
    var datastring = {'name':name, 'email':email, 'phone':phone };
    $.ajax({
       url:"register.php",
       type:"post",
       data: datastring,
    }).done(function(data)
   {
      if(data == "DONE")
      {
         success_msg.innerHTML = "Registered Successfully";
      }
      else
      {
         error_msg.innerHTML = "Failed to Register";
      }
      
      document.getElementById("name").value = "";
      document.getElementById("email").value = "";
      document.getElementById("phone").value = "";
   }); 

 }
 
 return false;
 }
 </script>
 
 
 <form name="frm_register" name="" id="" action="" method="POST" onsubmit="return validate();">
 <h3>Registration Form</h3>
 Name: <input type="text" name="name" id="name" >
 <span id="error_name"></span>
 <br/>
 <br/>
 Email: <input type="email" name="email" id="email">
 <span id="error_email"></span>
 <br/>
 <br/>
 Phone: <input type="text" name="phone" id="phone">
 <span id="error_phone"></span>
 <br/>
 <br/>
 <input type="submit" name="register" id="register" value="register">
 <br/>
 <span id="error_msg" style="color:red"></span>
 <span id="success_msg" style="color:green;"></span>
 </form>
 </body>
</html>


<!--------in register.php ----->

<?php
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dbname="test";
$con = mysql_connect('localhost', 'root', '');
$msg = "";

if ($con)
{
    mysql_select_db($dbname); 
 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
 
    $query = "INSERT INTO register(F_NAME, CONTACT, EMAIL)   VALUES('$name', '$phone' , '$email')"; 
    $done = mysql_query($query, $con);
 
   if($done)
   {
     $msg = "DONE" ;
   }
   else
   {
     $msg = "FAIL";
   }
   echo $msg;
}

?>
Share this:
