<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend>Login form</legend>
<form>
<p>
<label for="email">Email id</label>
<input type="email" name="email" class="email">
</p>
<p>
<label for="password">Password</label>
<input
type="password"
name="password"
class="password"
state="hide"
>
<strong class="show_hide">Show</strong>
</p>
<p>
<button type="button">Register</button>
</p>
</form>
</fieldset>
</body>
</html>
<script type="text/javascript">
$(function(){
$(document).on("click",".show_hide", function(){
var me=$(this);
var password=$(".password");
if(password.attr("state")=="hide"){
password.attr("type","text");
me.html("Hide");
password.attr("state","show");
}
else if(password.attr("state")=="show"){
password.attr("type","password");
me.html("Show");
password.attr("state","hide");
}
})
})
</script>
डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग
Full Stack Web Development with Laravel
Affiliate Program
jQuery show hide password toggling
Contact us
GSTIN: 05AAGCC7402F1Z2