How do I toggle password visibility?
There is no 'toggle element' function that I know of, so I do it this way.
<!DOCTYPE html>
<html>
<body>
Password: <input type="password" value="password" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show the Password
<script>
function myFunction() {
var pw_ele = document.getElementById("myInput");
if (pw_ele.type === "password") {
pw_ele.type = "text";
} else {
pw_ele.type = "password";
}
}
</script>
</body>
</html>
You can simply do like this
function togglePassword(){
var type = document.getElementById("Password").type;
if(type=='password'){
document.getElementById("Password").type = "text";
}else{
document.getElementById("Password").type = "password";
}
}<input type="password" id="Password" name="Password">
<input class="form-control" type="checkbox" onclick="togglePassword()" />function showPassword() {
const password = document.querySelector('#Password');
password.type = (password.type==="password") ? "text" : "password";
password.focus();
}<form method="post">
<div class="text-danger validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<div id="log_reg" class="form-group">
<i class="fas fa-envelope" aria-hidden="true"></i>
<label for="Email">Email</label>
<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div id="log_reg" class="form-group">
<i class="fas fa-key" aria-hidden="true"></i>
<label for="Password">Password</label>
<input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
<span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
<input class="form-control" type="checkbox" data-val="false" id="Show Password" onclick="showPassword()" />
</div>
<div class="custom-checkbox">
<label for="RememberMe">
<input class="form-control" type="checkbox" data-val="true" data-val-required="The Remember me field is required." id="RememberMe" name="RememberMe" value="true"> Remember me
</label>
</div>
<button id="button1" type="submit" class="btn btn-primary">Login</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8OZRytqGjWNEjmm5lNWbbA4QbTKNuzp2dAWmUxUXfDlU4MdRo0VC9BJ7Irjjcx-3bsw-uBfYK-9723M-E4t0uFUUXglXGEGD7bAuWsxnMzHhX0hwOTX1p-bejSkH4ONUDjfhMOyBcMNpkmty_dYln1M">
<input name="RememberMe" type="hidden" value="false">
</form>