I want to implement show and hide functionality for textbox Password,I have done that with the help of jquerr it is working properly when i click on show password first time but when i am clicking second time on show password checkbox,autometically the show password checkbox goes disappear,please help me with this problem
What I have tried:
<div class="form-group">
<asp:Label ID="lblPassword" runat="server" Text="Password" Font-Bold="true"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="Enter Password Here" ></asp:TextBox>
<label for="chkShowPassword">
<input type="checkbox" id="chkShowPassword" />
Show password</label>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$(function () {
debugger;
$("#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());
}