{% extends "layout.html" %} {% block body %} <script type="text/javascript"> $(function() { var submit_form = function(e) { $.getJSON($SCRIPT_ROOT + '/_add_numbers', { a: $('input[name="a"]').val(), b: $('input[name="b"]').val() }, function(data) { $('#result').text(data.result); $('input[name=a]').focus().select(); }); return false; }; $('a#calculate').bind('click', submit_form); $('input[type=text]').bind('keydown', function(e) { if (e.keyCode == 13) { submit_form(e); } }); $('input[name=a]').focus(); }); </script> <h1>jQuery Example</h1> <p> <input type="text" size="5" name="a"> + <input type="text" size="5" name="b"> = <span id="result">?</span> <p><a href=# id="calculate">calculate server side</a> {% endblock %}