11

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.

MefAldemisov
  • 867
  • 10
  • 21
Sidney
  • 113
  • 1
  • 1
  • 8

2 Answers2

16

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.

<html>
    <head>
        <title>Testing QR code</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            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>
    </head>
    <body>
        <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" />
    </body>
</html>

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.

zedfoxus
  • 35,121
  • 5
  • 64
  • 63
  • Not sure why but generateBarCode is missing an opening quote – Sidney May 08 '15 at 03:57
  • @Sidney Which line do you see a missing opening quote? – zedfoxus May 08 '15 at 04:01
  • 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"` – zedfoxus May 08 '15 at 04:07
  • Not sure why is it still appearing. The opening Quote is already there but the error keep coming up. Anyway to solve this ? – Sidney May 08 '15 at 04:16
  • What kind of error are you seeing? I placed the exact HTML on [my projects page](http://zedfox.us/projects/stackoverflow/30115242.html) and it works as desired. Feel free to right click the page > View page source and copy and paste as desired. – zedfoxus May 08 '15 at 04:25
0

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...

MiMFa
  • 981
  • 11
  • 14