Submit Form without Refreshing page with jQuery and Ajax

Submit-PHP-Form-using-jQuery-Ajax

In this tutorial, we will create sample form and Submit Form without Refreshing page with jQuery and Ajax. You can take an idea from this tutorial and enhances you php web application by using of jQuery and ajax. Ajax is used to communicate with database. With AJAX you can perform database transaction like saving, updating data to table and fetching data to show on particular section of page without refreshing the page.

So let’s start writing code to Submit a Form without Refreshing page with jQuery and Ajax.

jQuery and Ajax script

In below jQuery and AJAX script will include jQuery library from Google and process form data on submit button click event.  After getting form data we will call $.ajax({  to process data. In AJAX call we will define form method, its action URL and assign form data to data object

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script><script type="text/javascript">
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&email=' + email + '&password=' + password + '&gender=' +gender;
if(name=='' || email=='' || password=='' || gender=='') {
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else {
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}

return false;

});

});
</script>

HTML Form
This is sample html form, which we are going to submit by ajax call and save its value. We are using two HTML span element to handle the success and error message that will print when AJAX will be called and execute save.php file.

<form method="post" name="form">
<ul>
<li><input id="name" name="name" type="text" /></li>
<li><input id="email" name="email" type="text" /></li>
<li><input id="password" name="password" type="password" /></li>
<li><select id="gender" name="gender">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</li>
</ul>
<div>
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> You are registered successfully.</span>
</div>
></form>

save.php
This file will be called when we call ajax and pass this file as URL value, which will print the statement based on success or error. That statement we will get in success object in ajax call.

<?php
if($_POST) { 
	$name=$_POST['name']; 
	$email=$_POST['email']; 
	$password=$_POST['password']; 
	$gender=$_POST['gender']; 
	mysql_query("SQL insert statement......."); 
        } else { 
           // do else 
       } 
?>

That’s all folks. Now you can use the idea from this script for Submit Form without Refreshing page with jQuery and Ajax. It will help you in building web application where you have to submit some form data to database without refreshing the page. I hope you like this tutorial for the Submit Form without Refreshing page with jQuery.

Please submit your comments if you have any questions or suggestions regarding this post for improvement.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.