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: 


6 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

Thanks for sharing such a nice information with us. Very useful lines and to the point.
jQuery Interview Questions Answers

JSON Interview Questions Answers

Reply

Good blog.thank you for sharing useful post.
web programming tutorial
welookups

Reply

Thank you so much for sharing such an informative article with us. Actually i was looking for the encryption and decryption method using jQuery plugin pagination demo with source code and this blog share really valuable information with the code.I am expecting more similar blogs from here.

Reply

Post a Comment