Menu
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&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.
853
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 + '&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&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.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
