Home » JQuery Basics » JQuery Examples » JQuery Tutorial » How to do Encryption and Decryption using JQuery Plugin?

How to do Encryption and Decryption using JQuery Plugin?

in , , - on 23:08 - 6 comments


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: 


Labels: , ,

6 comments

Umar mod
11 May 2018 at 03:52

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
Unknown mod
11 June 2018 at 22:48

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
Dhananjay mod
8 September 2018 at 07:09

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
suman mod
4 October 2018 at 05:54

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

Reply
milan joy mod
12 October 2018 at 06:33

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