Show hide password jquery script

Hello friends, welcome to my another small jQuery application Show hide password jQuery script. In my previous blog I show you how to submit form without Page refresh. Today I will show you how to create a jQuery script for show hide password field. In this application I just create a input type password field and you know when you put your password in password input field it will automatically hide your password.
But here I create a checkbox for show hide password. By clicking the checkbox you will see your exact password and by unchecked you do not see the password.

The main logic behind my script is that when you click on show password checkbox I retrieve all attribute and value and type from input type password field and create another input field with same attribute, value but I change the type into text field. I put the new input type instead of previous input field. Show hide password logic is very simple. So lets build the application.



Step1: Create the html markup for input type password

In this html markup I include two js file one is jQuery main library(jquery-1.11.1.min.js) and another is function.js.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Show Hide Password using jQuery</title>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/function.js"></script>
</head>
<body>
	<input type="password" id="password" class="password" name="user_password" />
</body>
</html>

Step2: Create function.js file

$(document).ready(function(){
	$('input[type="password"]').after('<input type="checkbox" id="sp_checkbox"/> Show Password');
	$('#sp_checkbox').change(function(){
		var prev = $(this).prev();
		
		var value = prev.val();
		var type = prev.attr('type');
		
		var  name = prev.attr('name');
		var  id = prev.attr('id');
		var  dclass = prev.attr('class');
		var new_type = (type == 'password') ? 'text' : 'password';
		
		prev.remove();
		$(this).before('<input type="'+new_type+'" value="'+value+'" name="'+name+'" id="'+id+'" class="'+dclass+'" />');
	});
});

That’s all. Now you learn how to Show hide password using jQuery. You can use this application with any form.
Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •