How to do Encryption and Decryption using JQuery Plugin?



Introduction: 

Most of the times, we have give encrypt and decrypt our security in the browser operation.

Description: 

In the privous example, we have seen how to create anchor tag dynamically.  

In this JQuery example i am going to explain how to do encrypt and decrypt our security data and how to disable and enable button using JQuery.

Here we using third party plug-in for doing encryption and decryption operations.

Code: 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

<script>
$(document).ready(function(){
 $('#btnDecryption').attr('disabled','disabled');
 
 $('#btnEncryption').click(function(){
  var encryptionText=$('#txtEncryption').val();
  $('#EncryptionText').text(CryptoJS.AES.encrypt(encryptionText, "/"));
  $('#btnDecryption').removeAttr('disabled');
 });
 
 $('#btnDecryption').click(function(){
  var decryptionText=$('span#EncryptionText').text();
  $('#DecryptionText').text((CryptoJS.AES.decrypt(decryptionText, "/")).toString(CryptoJS.enc.Utf8));
  
 });
});
</script>
</head>
<body>
<b>Welcome to JQueryExampleCode.blogspot.com</b>
<br /><br />
<input type="text" id="txtEncryption" />
<br />
<input type="button" id="btnEncryption" value="Encrypt" />
<br />
<b>Encryption Text:</b> <span id="EncryptionText"> </span> <br />
<input type="button" id="btnDecryption" value="Decrypt" />
<br />
<b>Decryption Text:</b><span id="DecryptionText" style="background-color:yellow"> </span> <br>
</body>
</html>

Video Tutorial: 

Output: 


3 comments

Sir, I am using the code above. However, the links
"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.crypto-js"
and
"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"
cannot not be found.

Is there new links to use the plugin?

Reply

Greetings Mate,

You make learning and reading addictive. All eyes fixed on you. Thank you being such a good and trust worthy guide.

I want to display tree grid which contain tab details like the attachment. Means when user click on any tree grid item then he will get expanded result in tab format like this which you can see in attached documents

Awesome! Thanks for putting this all in one place. Very useful!


Many Thanks,
Morgan

Reply

Post a Comment