Generate QR Code in JQuery

    Feb 08, 2016       by Pankaj Kumar
generate-qr-code-with-jquery.jpg

Hi, Today we will create a demo(Javascript sample application) to generate QR code with jquery. We all have listented this word in  our app development life and also now its very common in mobile applications. The full form of QR code is Quick Response. It is a type of two-dimensional bar code that can be read using smart phones and dedicated QR reading devices, that link directly to text, emails, websites, phone numbers etc.

It is a very common to use in the apps for authentication. There is lot’s of Qr Code reader apps available over Internet. Some companies using QR code to proving extra security while user log-in on their panel. At that time of login you’ll see QR code image which you have to scan with your smart phone and you’ll see a secret pin which you need enter to access their panel.

 

So lets proceed to create the demo, We will use jquery.qrcode.js library to generate QR code, It is very simple and easy to use library for making QR Codes.

Now let's have a look on html part of our code:

 

 
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center" style="background-color:#e2e2e2;">
<h1>QR Code Generator</h1>
 
<div>
<p>Enter Text to embed in QR Code</p>
<p><textarea name="txt" style="height:50px;width:350px;" required="required"></textarea></p>
 
<p>Image Size : <select name="size">
<option value="100x100" selected>100x100</option>
<option value="200x200">200x200</option>
<option value="300x300" >300x300</option>
</select></p>
<p><input type="submit" value="Generate QR Code" id="qr-gn"></p>
</div>
 
<br/>
<div id="qrcode"></div>
 
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
 

 

Above we can see there is a text area to enter the text of which we want to create QR code below that dropdown to chooze the size of QR code and a button. At the bottom we have included the needed library. 

 

Now let's have a look in the javascript code.

 

 
$(function(){
$("#qr-gn").click(function(){
  $("#qrcode").html("");
var txt = $.trim($('textarea[name="txt"]').val());
if(txt == '') {
    alert("Please enter text you want to embed in QR Code");
    return false;
  }
var size = $('select[name="size"]').val();
var sizeSplit = size.split('x');
var width = sizeSplit[0];
var height = sizeSplit[1];
generateQRcode(width, height, txt );
return false;
});
 
   function generateQRcode(width, height, text) {
      $('#qrcode').qrcode({width: width,height: height,text: text});
   }
 
});
 

 

The above code is responsible for generating QR code with the text & dimension choosed over the page.

 

That’s all for now . Thank you for reading and I hope this demo(Javascript Sample Application) will be very helpful for generating QR code with javascript/jquery.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

You can download complete code from here. Download Code

Js demo qr-code generate

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS