Hello friends, Previous chapter we learned full Register form with email verification code. Today we are going to learn
Check existing username and match password using ajax in form. While register the form we have check whether the username is already exist in the Database, Samething we do while login to check the confirmation password are matching are not.
There are few ways to check the existing username in database but ajax is the simple and fastest way for checking.
So here we go,
Step 1:
please Use previous chapter Database, Table, Config File, and Css file.
Step 2: Create password update form with ajax script names as password_update.php.
<?php
include("config.php");
if(isset($_POST['submit']))
{
$username = mysql_real_escape_string($_POST['username']); //username
$password=mysql_real_escape_string($_POST['password']); //password
$Cpasssword=mysql_real_escape_string($_POST['Cpassword']); //confirm password
if($password==$Cpasssword)
{
$insert=("UPDATE admin set Password='$passsword' WHERE User ='".$username."'"); //update mysql query
$insert1=mysql_query($insert);
echo "Your Password is updated";
}
else
{
echo "Sorry there is some error in updating ";
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/>
</head>
<!--- Here is the java script function for checking the existing username -->
<script type="text/javascript">
function showUser(str) // get string value like username using function
{
if (str=="")
{
document.getElementById("txtHint").innerHTML=""; // "txtHint" is the id used to get the username
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","check_password.php?q="+str,true); // pass the user details to check_password page using GET function
xmlhttp.send();
}
</script>
<!--- check username functions End here ---->
<!-- Password matching script here --->
<script type="text/javascript">
function password()
{
var pwd=document.getElementById("password").value; // password value get by id
var cpwd=document.getElementById("Cpassword").value; //Cpassword value get by id
if(pwd==cpwd) //compare two password
{
var t1=document.getElementById('pass').innerHTML="Password Match"; // print output
/*t1.style.display='block';*/
}
else
{
var t1=document.getElementById('pass').innerHTML="Password does not Match";
/* t1.style.display='block';*/
document.form.password.focus();
}
}
</script>
</head>
<div class="wrapper">
<div class="clearfix"></div>
<div class="headline">
<h1>Password Update</h1>
</div>
<form class="form" name="password" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onSubmit="return passvali();">
<div class="tb-row">
<label for="first-name">Username</label>
<input type="text" name="username" autocomplete="off" required="required" onChange="showUser(this.value)"/>
<!-- onchange function used to call the ajax -->
<span class="str" id="txtHint"></span> <!-- txthint pass the username details -->
</div>
<div class="tb-row">
<label for="password">New Password</label>
<input type="password" name="password" autocomplete="off" required="required" id="password"/>
</div>
<div class="tb-row">
<label for="password">Confirm Password</label>
<input type="password" name="Cpassword" id="Cpassword" autocomplete="off" required="required" onChange="return password()"/>
<!-- onchange function used to call the ajax -->
<span id="pass" style="color:#F00;">
</div>
<input id="submit" type="submit" name="submit" class="but submit" value="update"/>
</form>
<br/>
</div>
</body>
</html>
Just use this ajax script, we can learn more about ajax in my next ajax tutorials.
Step 3 : Create check password file named as check_password.php
<?php
include('config.php');
$user=$_GET['q']; // get username
$select=mysql_query("select * from admin"); //check in database
$fetch=mysql_fetch_array($select);
$data_user=$fetch['User'];
if($data_user==$user) // match input and database username
{
echo "User name valid"; // print output
}
else
{
echo "provide valid Username";
}
?>
Run the file and check the Results, That’s it u did it, enjoy the code
Download full code here – Check existing username and match password using ajax
Alternative download link
