Step:1 We can access data in the MySQL database, we need to be able to connect to the server..
Demo/config.php
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
Step:1 we have to put script code in head tag in page index.php..
Demo/Index.php
<!doctype html>
<html>
<head>
<title>Check username availability with jQuery and AJAX</title>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
$("#txt_uname").keyup(function(){
var uname = $("#txt_uname").val().trim();
if(uname != ''){
$("#uname_response").show();
$.ajax({
url: 'uname_check.php',
type: 'post',
data: {uname:uname},
success: function(response){
// Show status
if(response > 0){
$("#uname_response").html("<span class='not-exists'>* Username Already in use.</span>");
}
else{
$("#uname_response").html("<span class='exists'>Available.</span>");
}
}
});
}else{
$("#uname_response").hide();
}
});
</script>
</head>
<body>
<div class="container">
<div id="div_reg">
<h1>Registration</h1>
<div>
<input type="text" class="textbox" id="txt_name" name="txt_name" placeholder="Name"/>
</div>
<!-- Username -->
<div>
<input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
<div id="uname_response" class="response"></div>
</div>
<div>
<input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/>
</div>
<div>
<input type="password" class="textbox" id="txt_repwd" name="txt_repwd" placeholder="Re-type Password"/>
</div>
<div>
<input type="submit" value="Submit" name="but_submit" id="but_submit" />
</div>
</div>
</div>
</body>
</html>
Demo/style.css
/* Container */
.container{
margin: 0 auto;
width: 70%;
}
/* Registration */
#div_reg{
border: 1px solid gray;
border-radius: 3px;
width: 470px;
height: 370px;
box-shadow: 0px 2px 2px 0px gray;
margin: 0 auto;
}
#div_reg h1{
margin-top:0px;
font-weight: normal;
padding:10px;
background-color:cornflowerblue;
color:white;
font-family:sans-serif;
}
#div_reg div{
clear: both;
margin-top: 10px;
padding: 5px;
}
#div_reg .textbox{
width: 96%;
padding: 7px;
}
#div_reg input[type=submit]{
padding: 7px;
width: 100px;
background-color: lightseagreen;
border: 0px;
color: white;
}
/* Response */
.response{
padding: 6px;
display: none;
}
.exists{
color: green;
}
.not-exists{
color: red;
}
step3: Now Match Username against Database using PHP
Demo/uname_check.php
<?php
include 'config.php';
$uname = $_POST['uname'];
// Check username
$query = "select count(*) as cntUser from users where username='".$uname."'";
$result = mysqli_query($con,$query);
$row = mysqli_fetch_array($result);
$count = $row['cntUser'];
// Return total rows found
echo $count;
No comments:
Post a Comment
If you have any problem please let me know.