Skip to content

Instantly share code, notes, and snippets.

@avenet

avenet/qr_generator.html

Created August 18, 2014 21:08
Show Gist options
  • Save avenet/dd359883fd6dbc2daf57 to your computer and use it in GitHub Desktop.
Save avenet/dd359883fd6dbc2daf57 to your computer and use it in GitHub Desktop.
Download ZIP
QR Generator using Google Chart API
Raw
qr_generator.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google QR Generator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<h1 style="padding-left:1%">Google QR Generator.</h1>
<form class="qr-form" style="padding:1%" class="form-inline bs-example" method="get" role="form" action="">
<div id="image-group" style="display:none" class="form-group">
<label style="width:160px">Image:</label>
<img id="qr-image" src="" height="200px" width="200px">
</div>
<div class="form-group">
<label style="width:200px">Attached QR Text:</label>
<textarea name="chl" type="text" placeholder="Enter attached QR text..."></textarea>
</div>
<input name="chs" type="hidden" class="form-control" id="exampleInputEmail1" value="200x200">
<input name="cht" type="hidden" class="form-control" id="exampleInputEmail1" value="qr">
<button type="submit" class="btn">Submit</button>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
$("#image-group").hide();
var url = "https://chart.googleapis.com/chart?" + $( this ).serialize();
$("#qr-image").attr('src', url);
$("#image-group").show();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment