<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form role="form" id="URLImageToBase64" action="#"> <h1 class="form-signin-heading">URLImageToBase64 Converter</h1> <div class="input-group input-group-lg"> <span class="input-group-addon">URL</span> <input type="text" class="form-control" placeholder="Please enter an URL" name="url" value="http://placehold.it/350x150"> </div> <br> <button class="btn btn-lg btn-primary btn-block" type="submit" name="convert">Convert</button> <br> <textarea rows="3" id="description" name="description" class="input-block-level" placeholder="Description"></textarea> </form> </div>

body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; }

$(document).ready(function () { $("#URLImageToBase64").submit(function (event) { try { console.log(document.URL); console.log(event); console.log(this.id); console.log($(this).serialize()); } catch (e) { alert("ERR: " + e); } event.preventDefault(); }); var url = document.URL.split('#')[1]; if (url == undefined) { url = ''; if (url != '') { var message = 'You clicked ' + url; $('#parameter').text(message); } } });