Lectures List
capscom technology computer course almora

jQuery show hide password toggling

<!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>
Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।