In this article I will explain how to implement “Show Password” functionality for Password TextBox when the “Show Password” CheckBox is checked using plain jQuery and no additional jQuery plugin.
This “Show Password” feature is of great use and it allows user to view and verify their password during registration as well as when logging into some website.
The article contains explanation for HTML Password TextBox as well as ASP.Net TextBox.
HTML Implementation
Below is sample Login form with a HTML INPUT TextBox for Password. There’s a CheckBox which will be used to allow user show and hide the Password.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Password
</td>
<td>
<input type="password" id="txtPassword" />
</td>
</tr>
<tr>
<td>
<label for="chkShowPassword">
<input type="checkbox" id="chkShowPassword" />
Show password</label>
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chkShowPassword").bind("click", function () {
var txtPassword = $("#txtPassword");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
</script>
ASP.Net Implementation
Below is sample form with an ASP.Net TextBox for Password and a Button control. There’s a CheckBox which will be used to allow user show and hide the Password.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode = "Password" />
</td>
</tr>
<tr>
<td>
<label for="chkShowPassword">
<input type="checkbox" id="chkShowPassword" />
Show password</label>
</td>
<td>
<asp:Button ID="Button1" Text="Submit" runat="server" onclick="Button1_Click" />
</td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chkShowPassword").bind("click", function () {
var txtPassword = $("[id*=txtPassword]");
if ($(this).is(":checked")) {
txtPassword.after('<input onchange = "PasswordChanged(this);" id = "txt_' + txtPassword.attr("id") + '" type = "text" value = "' + txtPassword.val() + '" />');
txtPassword.hide();
} else {
txtPassword.val(txtPassword.next().val());
txtPassword.next().remove();
txtPassword.show();
}
});
});
function PasswordChanged(txt) {
$(txt).prev().val($(txt).val());
}
</script>
Explanation
A jQuery event click handler has been attached to the CheckBox, thus when the CheckBox is checked or unchecked the event handler will be triggered.
Inside the event handler if the CheckBox is checked, a dynamic HTML Input TextBox is appended next to it with the password user has entered.
The application will work both ways i.e. user can type in either TextBox and submit and the password will be sent to the server.
Fetching password from TextBox on Server Side in ASP.Net
On server side I would recommend to fetch the password using Request.Form since sometimes the TextBox Text property does not hold the value modified using JavaScript.
C#
protected void Button1_Click(object sender, EventArgs e)
{
string password = Request.Form[txtPassword.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + password + "');", true);
}
VB.Net
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Dim password As String = Request.Form(txtPassword.UniqueID)
ClientScript.RegisterStartupScript(Me.[GetType](), "alert", (Convert.ToString("alert('") & password) + "');", True)
End Sub
![Show Hide Password in Password TextBox with CheckBox using jQuery]()
Demo
Downloads
