How to submit a form using AJAX

This is a Registration.php file

In This file Simple create registration form and submit by using AJAX

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#myForm').on('submit',function(event) {
$.ajax({
url:'success.php',          //target file
data:$(this).serialize(),    //translate data structure and object
type:'POST',
success:function(data){

console.log(data);
$("#success").show();       // Show Success Message==
},
error:function(data){

$("#error").show().fadeOut(5000);   //===Show Error Message====
}
});
event.preventDefault();         //To Avoid Page Refresh and Fire the Event "Click"
});
});
</script>

</head>
<body>
<h2 >Registration Form</h2>

<table align:center>
<form id="myForm" method="POST" action="" >
<tr>
<tr><td>Name :</td><td><input type="text" name="name" required></td></tr>
<tr><td>SarName :</td><td><input type="text" name="sarname" required></td></tr>
<tr><td>Birthday :</td><td><input type="date" name="bday" required></td></tr>
<tr><td>E-mail :</td><td><input type="email" name="email" required></td></tr>
<tr><td>Password :</td><td><input type="password" name="password" required></td></tr>
<tr><td>re-Password :</td><td><input type="password" name="passward" required></td></tr>
<tr><td><button type="submit" name="submit" id="submit">submit</button></td> </tr>
</tr>
<span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span>

<span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
</form>
</table>

<?php ?>
</body>

</html>

This is success.php file

In This file include php code for Connect to the Database

you need just create one database and one table in phpmyadmin as per below sql query

<?php 
$name = $_REQUEST['name'];
$sarname = $_REQUEST['surname'];
$birthday = $_REQUEST['bday'];
$email = $_REQUEST['email'];
$password = $_REQUEST['password'];
$passward = $_REQUEST['passward'];
$submit = $_REQUEST['submit'];

$con = mysql_connect("localhost","root","");
if (!$con)
{
 echo "error in establish connection to server";
}
$db = mysql_select_db("your_database_name",$con);
$qry = "INSERT INTO your_table_name(name,surname,birthday,email,password,passward)VALUES('$name','$surname','$birthday','$email','$password','$passward')";
$result = mysql_query($qry);

if (!$result) {
 echo "Could not successfully run query ($sql) from DB: " . mysql_error();
 exit;
}
if($result)
{
echo "your registration completed";
}
?> 
Advertisements

5 thoughts on “How to submit a form using AJAX

  1. You should write it with proper example so it is easier to understand. I am a newbie on this, Please post the complete example for it.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s