But in the Ajax method we can pass and retrive the form data into server side without referesh form.From the following diagram you can uderstand this.
The given example is for a simple registeration form , there have an opton for checking username availabilty without referesh form.
In the folllowing form we have a button for checking username availabilty
register.php
<form action="register.php" method="POST" name="register" >
<table border="0" width="100%">
<tr>
<td width="50%" align="left" class="frmcnt" >Username</td>
<td width="50%"><input name="username" type="text" value="" >
<input type="button" name="Uavailability" value="checkavailability" onclick="javascript: return usernameavailability();"></td>
</tr>
<tr><td colspan="3"
align="center"><div id="availability"
class="topcnt"></div></td></tr>
<tr>
<td width="50%" align="left" >password</td>
<td width="50%"><input name="upass"
type="password" ></td>
</tr>
</table>
</form>
|
when you click on that button, it will call a javascrit function 'checkavailability'.This javascript function will pass the entering username into an another php page.
<script language="javascript">
function usernameavailability() {
var URL = "username_chk.php?uname="+document.register.username.value;
req = false;
// for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {document.frm.
req = false;
}
}
}
if(req) {
req.open( "GET", URL, false );
req.send(null);
document.getElementById("availability").innerHTML =
req.responseText;
}
}
</script>
|
This function will pass the username to another php page 'username_chk.php', in that page the script will check that username is exist or not?
username_chk.php
<?php
$userrs = mysql_query("SELECT *
FROM users
WHERE username = '".$_REQUEST['uname']."'");
$count = count($userrs);
if($count==0){
echo $_REQUEST['uname'] ." ".Available;
}else{
echo $_REQUEST['uname']." ".notavailable;
}
?> |
After checking , this function will print the result there.Using the method 'req.responseText' this result can access the first page(register.php) javascript function, and it will display in a div tag, id as 'availability'
