Generating a Simple QR-Code with just HTML

Asked 8/5, 2015 at 3:24 Answered 18/7 at 22:26

I came across this APIserver to generate the QRCode but I was wondering is it possible to just use HTML to generate the QRcode for example this is what I was thinking

<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/> 
         
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" alt="" title="HELLO" />

In the "title" I believe it is where you will write your text and the QR code would generate, I was wondering how can I create a text box for me to key in the value directly on a website.

Patrickpatrilateral answered 8/5, 2015 at 3:24 Comment(0)

Were you thinking of something like this? https://jsfiddle.net/v7d6d1ps/

Your HTML can be similar to what you have but with added onblur event. Only HTML cannot do this, so I have added jQuery/JavaScript combination.

function generateBarCode() {
  var nric = $('#text').val();
  var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&amp;size=50x50';
  $('#barcode').attr('src', url);
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<input id="text" type="text" value="NRIC or Work Permit" style="Width:20%" onblur='generateBarCode();' />

<img id='barcode' src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&amp;size=100x100" alt="" title="HELLO" width="50" height="50" />

Copy and paste this into an HTML file on your desktop. Type in the text box 12345 and hit tab. Notice that the QR code will update.

Interact answered 8/5, 2015 at 3:53 Comment(5)

Not sure why but generateBarCode is missing an opening quote – Patrickpatrilateral 8/5, 2015 at 3:57

@Patrickpatrilateral Which line do you see a missing opening quote? – Interact 8/5, 2015 at 4:1

You can use single quote or double quote. So onblur='generateBarCode();' and onblur="generateBarCode();" will both work. Same goes with id='barcode' and id="barcode" – Interact 8/5, 2015 at 4:7

Not sure why is it still appearing. The opening Quote is already there but the error keep coming up. Anyway to solve this ? – Patrickpatrilateral 8/5, 2015 at 4:16

What kind of error are you seeing? I placed the exact HTML on my projects page and it works as desired. Feel free to right click the page > View page source and copy and paste as desired. – Interact 8/5, 2015 at 4:25

You can use the snippet below, as the simplest way:

function UpdateQRCode(val){
    document.getElementById("qrcode").setAttribute("src","https://api.mimfa.net/qrcode?value="+encodeURIComponent(val)+"&as=value");
}
document.addEventListener("DOMContentLoaded", function(){
    UpdateQRCode(document.getElementById("qrcode").value);
});

<input onchange="UpdateQRCode(this.value)" value="Hello World..."/><br>
<iframe id="qrcode" src="" width="250" height="250"></iframe>

Enjoy...

Lachrymator answered 19/5, 2023 at 16:36 Comment(0)

Here is a QR code containing a phone number and URL:

<!DOCTYPE html>
<html>
<head>
  <title>QR Code</title>
</head>
<body>
  <h1>QR Code for your information</h1>
  <div id="qrcode"></div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
  <script>
    new QRCode(document.getElementById("qrcode"), {
      text: "tel:+1234098765\nhttp://example.com/",
      width: 256,
      height: 256,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H
    });
  </script>
</body>
</html>

Monogenic answered 18/7 at 22:26 Comment(0)

Recommended topics

Hot tags