jQuery Ajax Tutorial and Example


Before we are going with example let’s read something about jQuery and AJAX.

In this example we are submitting a simple form using AJAX.

To create a form first we are creating a database with name “ajax”.

Create a config file with name config.php.

<?
$dbhost = "localhost";   //replace it with your host name
$dbuser="root";               //replace it with your database username
$dbpassword="";             // replace it with your database password
$dbname="ajax";            // replace it with your database name

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_select_db($dbname);
?>

Now create a file called index.php where we will write the HTML and ajax function.

<? include_once("config.php"); ?>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<div style="width:100%;" align="center">
<p>&nbsp;</p>
<div style="width:1024px;border:solid 0px red; height:500px;" align="center">
<div style="float:left; width:500px;">
<fieldset style="border:solid 1px blue;">
<legend><strong style="color:blue;">Registration Form</strong></legend>
<form name="registration" id="registration">
<table border="0" cellspacing="5" cellpadding="3">
<tr>
<td width="20%">Name:</td>
<td width="80%"><input name="name" id="name" type="text" autocomplete="off" onfocus="if(this.value=='Enter Your Name'){this.value=''}" onblur="if(this.value==''){this.value='Enter Your Name'}" value="Enter Your Name" style="color:#999;" size="30" /></td>
</tr>
<tr>
<td>City:</td>
<td><input name="city" id="city" type="text" autocomplete="off" onfocus="if(this.value=='Enter Your City'){this.value=''}" onblur="if(this.value==''){this.value='Enter Your City'}" value="Enter Your City" style="color:#999;" size="30" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" id="email" type="text" autocomplete="off" onfocus="if(this.value=='Enter Your Email'){this.value=''}" onblur="if(this.value==''){this.value='Enter Your Email'}" value="Enter Your Email" style="color:#999;" size="30" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="submit" id="submit" type="button" value="Submit" onclick="return validate(this);" /></td>
</tr>
</table>
</form>
</fieldset>
</div>
<div style="float:right; width:500px;">
<fieldset style="border:solid 1px blue;">
<legend><strong style="color:blue;">Result</strong></legend>
<div id="msg" style="color:red;"></div>
<table width="400" id="msgdata" border="1">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>City</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?
$row=mysql_query("SELECT * FROM user order by id");
$lRowNum=mysql_num_rows($row);
while($lRow=mysql_fetch_assoc($row))
{
?>
<tr>
<td align="center"><?=$lRow['id']?></td>
<td align="center"><?=ucwords($lRow['name'])?></td>
<td align="center"><?=ucwords($lRow['city'])?></td>
<td align="center"><?=$lRow['email']?></td>
</tr>
<?
}
?>
</tbody>
</table>
</fieldset>
</div>
<script>
function validate(form)
{
if(document.getElementById('name').value=='' || document.getElementById('name').value=='Enter Your Name')
{
alert("Please Enter Your Name");
form.name.focus();
}
if(document.getElementById('city').value=='' || document.getElementById('city').value=='Enter Your City')
{
alert("Please Enter Your City");
form.city.focus();
}
if(document.getElementById('email').value=='' || document.getElementById('email').value=='Enter Your Email')
{
alert("Please Enter Your Email");
form.email.focus();
}

ajaxData();
}
function ajaxData()
{
var name=document.getElementById('name').value;
var city=document.getElementById('city').value;
var email=document.getElementById('email').value;
$.ajax({
type: "POST",
url: "save.php",
data: {name: name, city: city, email: email}
}).done(function(msg) {
$("#msg").html('Data Saved');
$("#msgdata tbody").append(msg);
});
document.getElementById('registration').reset();
}
</script>
</div>
</div>

In the above file we write the HTML of our form and the necessary AJAX function along with the validation.

Now we need to create one more file, where we write the code to save the data in our database.

So, in the above file we named the file as save.php.

Write the following code in save.php

<?
include_once("config.php");
$str='';
mysql_query("INSERT INTO user SET name='".$_REQUEST['name']."', city='".$_REQUEST['city']."', email='".$_REQUEST['email']."'");

$str .='
<tr>
<td align="center">'.mysql_insert_id().'</td>
<td align="center">'.ucwords($_REQUEST['name']).'</td>
<td align="center">'.ucwords($_REQUEST['city']).'</td>
<td align="center">'.$_REQUEST['email'].'</td>
</tr>';

echo $str;
?>

And you are all done !!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s