Generating QR Code Dynamically using
 JavaScript

QR Code:

     QR Code(abbreviated from Quick Response Code) is the trademark for a type matrix bar code(or two-dimensional bar code) first designed for the automotive industry in Japan. A bar code is a machine-readable optical label that contains information about item to which it is attached.

QR_Code

              The above image is example of a QR-Code, it contains some embedded data which will be shown when the user or admin scans this QR-Code using some external Scanner application.

 This Scanner application will display the embedded data in the QR-Code.

     In this process I have used both HTML and Bootstrap for view part and

JavaScript for Scripting part.

The following script and styling files are placed in my Application for Generating QR_Code.

<link rel="stylesheet" href="Bootstrap.min.css">
<script type="text/javascript" src="bootstrap.min.js"> </script>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="qrcode.js"></script>

      Here, I have used one input field  for taking some data from the user for which I am going to generate the QR code along with that I have given one submit button which will generate the QR code for the text which I have entered in the text box.

      When I click on submit button, the value of the input filed will be  passed to the function makeCode() which in turn generates the QR Code.

Now, I have added my Html code for displaying these two fields.

<!----Html code------->

<div class="container">

<input type="text" id="qrcode1" style="margin-top:25px;">

<button class="btn btn-primary" onclick="makeCode()">Submit</button>

<!----QR Code will be Placed on this div Element------>

<div id="qrcode" style="width:100px;height:100px;margin-top:50px;">     </div>
</div>

After this, I have written a "JavaScript" function for generating QR Code.

<!------JavaScript function------>

<script type="text/javascript">

var qrcode = new QRCode(document.getElementById("qrcode"),

{

         width:100,

         height:100

});

function makeCode()

{

var qr_text = document.getElementById("text");

qrcode.makeCode(qr_text.value);

}

makeCode();

</script>

    In this code, the makeCode() function is getting the value of input field based on "id" and  this value is saved as  "qr_text" variable.

Here, the one line of code in my function,

 i.e, qrcode.makeCode(qr_text.value)   is going to generate the QR Code from qrcode.js file.

     The following image is the example for generate QR code for the value  given in input tag.

    Here, I have entered  some text "www.blogger.com"  in the text field and when I click on "Submit" button the action triggers the qrcode.js file which will generate the QR Code.

    This file also displays a tool tip which will display the data that is embedded with the QR Code when the mouse is hovered on the generated QR Code.

The following image will display the tool tip.

Please find the  link for downloading the "qrcode.js" file which is the root script file for generating the QR-code.

Click here.....!

Thanks,

Ramakrishna Dasari,

ramkidasari@gmail.com

www.mouritech.com