tutorial_54_example_1.html

<div style="width: 50%; margin: auto; text-align: center">
Enter a URL or String and hit Return <br> &nbsp;
<input id="text" type="text" value="" style="width:100%" />
</div>

<br>&nbsp;<br>&nbsp;<br>&nbsp;

<p style="text-align: center">Default is 256px Square in Black and White </p>
<div id="qrcode_1" style="width: 256px; margin: auto"></div>

<br>&nbsp;<br>&nbsp;<br>&nbsp;

<p style="text-align: center">Options allow for different colors and sizes</p>
<div id="qrcode_2" style="width: 128px; margin: auto"></div>


<script src="/javascripts/qrcode.min.js"></script>
<script type="text/javascript">

    var qrcode_1;
    var qrcode_2;

    $(document).ready(function() {

      $('#text').on('change', function(e){
        e.preventDefault();

        // clear the existing qr code images
        $('#qrcode_1').html('');
        $('#qrcode_2').html('');

        var str = $(this).val();

        // Simplest form - one line - default options - pass it the element and the string
        qrcode_1 = new QRCode(document.getElementById("qrcode_1"), str);

        // version with options, pass it the name of the element and a hash of options
        qrcode_2 = new QRCode("qrcode_2", {
            text: str,
            width: 128,
            height: 128,
            colorDark : "#600000",
            colorLight : "#ffffff"
        });
      });
    });

</script>