Send form data and save in PHP using Jquery and AJAX

In this tutorial we are going to discuss about how to send form data and save in Jquery usingf AJAX and PHP. Before discussing about this topic, want to say all of you that you have seen how to fetch ,delete and search data using AJAX with Jquery in PHP. Let us moving to tutorial, how to save data using AJAX without reloading of a webpage. This is very quite simple and easy as we have discussed in our previous tutorial of AJAX.AJAX with Jquery is used to send form data with for type like get and post method.
In this tutorial , the main file used for save data are as follows
AJAX part in this tutorial we are displaying separately but during coding preffered to use in form.php file. Here , in tutorial separate AJAx file is displaying for better understanding.

Demo
Form.php
Savedata.php
DB name = test
Table name = updatedata

Let us see in details
Form.php

<form method="POST">
<h3>Fill Your Information !</h3>
<div>
       Name:<input type='text' name='name' id="name">
       E-mail:<input type='text' name='email' id="email">
       Phone:<input type="text" name='phone’  id="phone">
     
       Message:<input type="text" name='message'  id="message">
     <input id="submit" type="button" value="Submit">
</form>

AJAX
This is the script part of code as usuaaly this this is coded in form.html but shown here in details.

<script src="jquery.min.js"></script>
<script>
 //on the click of the submit button 
 $(document).ready(function(){
$("#submit").click(function() {

//get the form values
    
var name=$('#name').val();
var email= $('#email').val();
var phone= $('#phone').val();
var message= $('#message').val();

//make the postdata
var postData = 'name1='+name+'&email1='+email+'&phone1='+phone+'&message1='+message;

if(name==''||email==''||phone==''||message=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.

    $.ajax({
    type: "POST",
    url: "savedata.php",
    data: postData,
    cache: false,
    success:  function(result){
        alert(result);
   } 
  });
  }
  return false;
});
 });
</script>

This is AJAX code with Jquery will send form data on savedata.php page with POST method where it will be get by Post variable to store in database.
Savedata.php

<?php 
mysql_connect("localhost","root","");
mysql_select_db("test");

$name2= $_POST['name1'];
$email2= $_POST['email1'];
$phone2= $_POST['phone1'];
$message2= $_POST['message1'];
$query=mysql_query("INSERT INTO `updatedata`(`name`,`email`,`phone`,`message`) VALUES('$name2','$email2','$phone2','$message2')");
 

echo "Your data has been added successfully";

?>