How to encrypt password on client side using Javascript

<script src=”https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js”></script> <script src=”http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js”></script>HTML form

<form class="form-signin" method="post" name="signin" id="signin">
<input type="password"  name="password" id="password" placeholder="Password" id="password" value=""  />
<input type="hidden" name="hide" id="hide" />
<div style="color:red" id="err"></div>
<input type="submit" name="login"  type="submit" onclick="return encrypt()" value="Submit"  >
</form>
In this form I created one password field and one hidden field. Hidden field is used for hold the value of actual password. Javascrit for encryption
<script>
function encrypt()
{
var pass=document.getElementById('password').value;
var hide=document.getElementById('hide').value;
if(pass=="")
{
document.getElementById('err').innerHTML='Error:Password is missing';
return false;
}
else
{
document.getElementById("hide").value = document.getElementById("password").value;
var hash = CryptoJS.MD5(pass);
document.getElementById('password').value=hash;
return true;
}
}
</script>
In the above javascript i created a function encrypt(). I call this function on onclick submit button.
Here is the full code that we have written during this tutorial:
<html>
<head>
<title>Encrypt Password on client Side</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script>
     function encrypt()
	 {
        var pass=document.getElementById('password').value;
		var hide=document.getElementById('hide').value;
		if(pass=="")
		{
		   document.getElementById('err').innerHTML='Error:Password is missing';
		   return false;
		}
		else
		{
		   document.getElementById("hide").value = document.getElementById("password").value;
		   var hash = CryptoJS.MD5(pass);
		   document.getElementById('password').value=hash;
		  return true;
		}
	}
</script>
</head>
<body>
<form class="form-signin" method="post" name="signin" id="signin">
<input type="password"  name="password" id="password" placeholder="Password" id="password" value=""  />
<input type="hidden" name="hide" id="hide" />
<div style="color:red" id="err"></div>
<input type="submit" name="login"  type="submit" onclick="return encrypt()" value="LOGIN"  >
 </form>
</body>
</html>
[mks_button size="medium" title="View Demo" style="squared" url="https://www.phpgurukul.com/demos/clientvalid/" target="_blank" bg_color="#dd3333" txt_color="#FFFFFF" icon="fa-play" icon_type="fa" nofollow="0"] [sdm_download id="7139" fancy="1" show_size="1" show_version="1"]]]>

Anuj Kumar

This is Anuj Kumar. I’m a professional web developer with 4+ year experience. I write blogs in my free time. I love to learn new technologies and share with others.
I founded PHPGurukul in September 2015. The main aim of this website to provide PHP, Jquery, MySQL, PHP Oops and other web development tutorials.
.

Recommended Tutorials for you

1 comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.