
Change password feature in a web application is to let the user change their old password at some periodic interval. It makes the user protect the sensitive pages from hackers.
Some web application fixes some expiration period for user’s password. It forces the user to change the password once the expiration period is elapsed. For example, some banking applications force users to change the password for security.
We are going to see an example to change the password with Javascript validation by, accessing MySQL table.
This HTML code shows the change password.
<html> <head> <title>Change Password</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <form name="frmChange" method="post" action="" onSubmit="return validatePassword()"> <div style="width:500px;"> <div class="message"><?php if(isset($message)) { echo $message; } ?></div> <table border="0" cellpadding="10" cellspacing="0" width="500" align="center" class="tblSaveForm"> <tr class="tableheader"> <td colspan="2">Change Password</td> </tr> <tr> <td width="40%"><label>Current Password</label></td> <td width="60%"><input type="password" name="currentPassword" class="txtField"/><span id="currentPassword" class="required"></span></td> </tr> <tr> <td><label>New Password</label></td> <td><input type="password" name="newPassword" class="txtField"/><span id="newPassword" class="required"></span></td> </tr> <td><label>Confirm Password</label></td> <td><input type="password" name="confirmPassword" class="txtField"/><span id="confirmPassword" class="required"></span></td> </tr> <tr> <td colspan="2"><input type="submit" name="submit" value="Submit" class="btnSubmit"></td> </tr> </table> </div> </form> </body></html>
All the fields are mandatory and the newPassword and confirmPassword should be same. We are using Javascript validation. The validation function is,
<script> function validatePassword() { var currentPassword,newPassword,confirmPassword,output = true; currentPassword = document.frmChange.currentPassword; newPassword = document.frmChange.newPassword; confirmPassword = document.frmChange.confirmPassword; if(!currentPassword.value) { currentPassword.focus(); document.getElementById("currentPassword").innerHTML = "required"; output = false; } else if(!newPassword.value) { newPassword.focus(); document.getElementById("newPassword").innerHTML = "required"; output = false; } else if(!confirmPassword.value) { confirmPassword.focus(); document.getElementById("confirmPassword").innerHTML = "required"; output = false; } if(newPassword.value != confirmPassword.value) { newPassword.value=""; confirmPassword.value=""; newPassword.focus(); document.getElementById("confirmPassword").innerHTML = "not same"; output = false; } return output; } </script>
After successful form submits, the PHP code will access MySQL to get current password. If this database value is matched with the forms current password value, then the password will be changed. The PHP code is,
<?php session_start(); $_SESSION["userId"] = "9"; $conn = mysqli_connect("localhost", "root", "test", "blog_samples") or die("Connection Error: " . mysqli_error($conn)); if (count($_POST) > 0) { $result = mysqli_query($conn, "SELECT *from users WHERE userId='" . $_SESSION["userId"] . "'"); $row = mysqli_fetch_array($result); if ($_POST["currentPassword"] == $row["password"]) { mysqli_query($conn, "UPDATE users set password='" . $_POST["newPassword"] . "' WHERE userId='" . $_SESSION["userId"] . "'"); $message = "Password Changed"; } else $message = "Current Password is not correct"; } ?>
Thank you so much
Thank you for the great site. I just modified your code to work for my application, however in testing I realized that the passwords in my database are encrypted so when I try to change a password with this code it will never match whats in the database to allow it to change the password. What do I need to do to allow for this? Thanks in advance.
Hi,
encrypt new password before put it into database. For example, if your database has md5 encrypted password, then the query will be,
mysql_query(“UPDATE users set password='” . md5($_POST[“newPassword”]) . “‘ WHERE userId='” . $_SESSION[“userId”] . “‘”);
Thank you for this tutorial.
I have problem using this. I got the error “No database selected”!?
what should i do?
Thank you for this tutorial.
I have problem using this. I got the error “No database selected”!?
what should i do?
i got error on line 7 said that Warning: mysql_fetch_array() expects parameter 1 to be resource…help me please.
use mysqli
Thank You for nice tutorial
Thank you for the excellent code and article.
Welcome, Sadirul. Keep reading and sharing.
Hi, thanks so much for your intuitive knowledge
hello thank you for the code it worked.
Welcome Manjil.