QRCODE

qrcode generation pure javascript

by stofke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<body>
    <input type="text" id="long" placeholder="enter longitude" value="144.980615"
    />
    <input type="text" id="lat" placeholder="enter latitude" value="" /> <span> e.g. -37.866963</span>

    <div id="errorLatLng"></div>
    <div id="qrcodeTable"></div>
    <div id="qrcodeCanvas"></div>
</body>

CSS

#qrcodeTable, #qrcodeCanvas {
    float:left;
}
input {
    display:inline-block;
    margin-bottom:20px;
    width:226px;
    height:40px;
    padding:15px;
    font-size:24px
}
#errorLatLng{
   margin:10px;
   font-size:small;
   color:red; 
}

JavaScript

//http://maps.google.com/?q=-37.866963,144.980615

var regex = /^([\-+]?\d{1,2}([.]\d+)?),\s*([\-+]?\d{1,3}([.]\d+)?)$/;
var error = 'Latitude and Longitude may not be correctly typed';
var success = '';

$("#lat").bind('keyup', function (event) {
    if (jQuery('#lat').val().length !== 0 && jQuery('#long').val().length !== 0) {

        var latlng = jQuery('#lat').val() + ',' + jQuery('#long').val();

        if (!regex.test(latlng)) {
            $("#errorLatLng").html(error);
            return false;
        } else {
            $("#errorLatLng").html(success);
            jQuery('#qrcodeCanvas').empty();
            jQuery('#qrcodeCanvas').qrcode({
                render: "canvas",
                text: "http://maps.google.com/?q=" + latlng

            });
        }
    }
});

/*jQuery('#qrcodeTable').qrcode({
	    render: "table",
	    text: "http://jetienne.com"
	});
	jQuery('#qrcodeCanvas').qrcode({
	    text: "http://jetienne.com"
	});*/