This lesson will help u to check the user available or not so i write the lesson to my readers using few lines of jquey,ajax & php,mysql code.
Step 1
index.phpadd this jquery plugin script inside the <HEAD> tag
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
Step 2
i am writing the bellow code to user enters the name in input box and change to next input the ajax request will start the request using given url in ajax URL property usernamecheck.php and get response in message box. just place the bellow code inside the <HEAD>tag.
<script type="text/javascript">
$(document).ready(function(){
$("#username").change(function() {
$("#message").html('<img src="images/loader.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "usernamecheck.php",
data: "username="+ $("#username").val(),
success: function(msg){
$("#message").ajaxComplete(function(event, request, settings){
if(msg=='YES'){
$(this).html('<img src="images/right.png" align="absmiddle">');
}else{
$(this).html(msg);
}
});
}
});
});
});
</script>
Step 3
Now it's time to create usernamecheck.php
hear i am using POST method to get username and store the username in username variable now i am creating a small database using MySql to storing the users data and writing a small query to get the matched users from "users" table from "lessoncup" databasae and i am writing a condition to display the result message.
<?php
if(isset($_POST['username'])) {
$username= $_POST['username'];
mysql_connect("localhost","username","password") or die ("Unable to connect to Localhost");
mysql_select_db("database") or die ("Could not select the database.");
$getusers=mysql_query("select username from users where username='".$username."'");
if(mysql_num_rows($getusers)) {
echo '<img src="images/wrong.png" align="absmiddle">';
} else {
echo 'YES';
}
}
?>
Step 4
Create the database in MySqlCREATE TABLE IF NOT EXISTS `users` ( `user_id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(20) NOT NULL, PRIMARY KEY (`user_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
Live Demo Download Script
You should keep the HTML within the jQuery, instead of echoing at one point some HTML and on another point just "yes". Keep it with true or false, and keep the html that needs to be implemented into you jQuery. In small projects this won't be giving any problems, but once you go bigger it's way harder to find all your content.
ReplyDeleteNevertheless it's a good tutorial for people to learn understand how Ajax works. Good job!