Generate QR Code using jQuery

A QR code (Quick Response code) is a type of 2D barcode that stores information such as text, URLs, or other data. QR codes can store different types of data, including: Website URLs, Contact details (vCards), WiFi credentials, Payment details (like UPI, PayPal, etc.)

Demo :

Example

<html>
  <head>
   <title>QR Code Generator</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
   <style>
     body{
      text-align:center;
      margin-top:50px;
     }
   </style>
  </head>
  <body>
  <h3>QR Code Generator in jQuery</h3>
  <input type="text" id="qr-text" placeholder="Enter text or URL">
  <button id="generateQR">Generate QR Code</button><br><br>
  <canvas id="qrcode"></canvas>
  <script>
   $(document).ready(function () {
    $("#generateQR").click(function () {
     var text = $("#qr-text").val().trim();
     if (text === "") {
       alert("Please enter text or a URL");
       return;
     }
     new QRious({
       element: document.getElementById("qrcode"),
       value: text,
       size: 150
     });
    });
   });
  </script>
  </body>
</html>

Try it Yourself

Realtime Examples

Realtime Examples

Generate QR Code using jQuery

Demo :