0
232
ViewsShow/Hide Password ASP.NET
I am trying to implement a show/hide button in ASP.NET, and through some research I have discovered that using AJAX could be my best bet. I have been trying to understand AJAX, but I am clearly doing something wrong as the code does nothing.
I am trying to put this code in the body of my code, it is essentially the same code as that found on https://www.c-sharpcorner.com/blogs/show-and-hide-password-using-jquery-in-asp-net
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("<%=showP.ClientID %>").hover(function show() {
//Change the attribute to text
$("<%=txtPassword.ClientID %>").attr('type', 'text');
$("<%=showP.ClientID %>").removeClass('eyeOpen').addClass('eyeClosed');
},
function () {
//Change the attribute back to password
$("<%=txtPassword.ClientID %>").attr('type', 'password');
$("<%=showP.ClientID %>").removeClass('eyeClosed').addClass('eyeOpen');
});
//CheckBox Show Password
$("<%=showP.ClientID %>").click(function () {
$("<%=txtPassword.ClientID %>").attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});
</script>
Do I need to implement the AJAX CSS files for the script to function? The link above makes use of them, but I did not implement any of the styles myself, so I figured I could leave out a link to the stylesheets like this below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
I really do not have any of knowledge of AJAX, so any help would be greatly appreciated :)
2 answers
Answer question0
Well, no, you don't need anything really special here. jQuery DOES help, and you can do it this way:
<h3>Enter password</h3>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<br />
<br />
<asp:CheckBox ID="ckShowPass" runat="server" Text="Show password" onclick="myshowp()" />
<script>
function myshowp() {
ckbox = $('#ckShowPass')
txtBox = $('#txtPass')
if (ckbox.is(':checked')) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>
Output:
And if we check the box show password, then we get:
So, the above DOES use jQuery, and that is useally installed for you.
You can also use pure JavaScript, but the Text mode is read only, and thus you have to make a copy of the control - which is painful.
0
for the working demo, I used the HTML element you can do the same with the Asp.Net element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Enter password</h3>
<input id="txtPass" class="test" type="password"></input>
<br />
<br />
show <input type="checkbox" name="mycheckbox" id="ckShowPass" onclick="myshowp(this)"/>
<script>
function myshowp(e) {
txtBox = $('#txtPass')
if (e.checked) {
txtBox.attr("Type", "Text");
}
else {
txtBox.attr("Type", "Password");
}
}
</script>