QR-Code Generator

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>QR-Code Generator</title>
</head>
<body>
    <form id="generator">
        <label for="codeData">Data (url or text)</label>
        <input type="text" id="codeData" name="codeData" size="50" placeholder="Enter a url or text" />
        <label for="codeSize">Size:</label>
        <select id="codeSize" name="codeSize">
            <option value="75">XSmall</option>
            <option value="155">Small</option>
            <option value="186">Medium</option>
            <option value="248" selected="selected">Large</option>
            <option value="300">XLarge</option>
            <option value="450">XXLarge</option>
        </select>
        <button id="generate">generate</button>
    </form>

    <div id="image" style='width:400px; height: 200px'></div>
    <div id="link"></div>
    <div id="code"></div>
</body>
</html>

CSS

div {margin-bottom:20px;}
#code textarea {
      font-family:"Courier New", Courier, monospace;
      background:#ccc;
      color:#000;
      font-size:11px;
      width:400px;
}

JavaScript

$("#generate").click(function() {
    var data = $("#codeData").val();
    var size = $("#codeSize").val();
    alert(size);
    if(data == "") {
        alert('please enter a url or text');
        return false;
    } else {
        if( $("#image").is(':empty')) {
            $("#image").append("<img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' />");
            $("#link").append("<a href='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "'>Permalink</a>");
            $("#code").append("<textarea readonly='readonly' wrap='off'>&lt;img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' /&gt;</textarea>");
            return false;
        } else {
            $("#image").html("");
            $("#link").html("");
            $("#code").html("");
            $("#image").append("<img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' />");
            $("#link").append("<a href='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "'>Permalink</a>");
            $("#code").append("<textarea readonly='readonly wrap='off>&lt;img src='http://chart.apis.google.com/chart?cht=qr&chl=" + data + "&chs=" + size + "' alt='qr' /&gt;</textarea>");
            return false;
        }
    }
});