simple jquery example

Displays an input with an add button. Clicking the add button creates a simple form - input with a submit button. Clicking the submit button will send the output to the server and return a value which is displayed.

View:deftryit(request):""" Create a form on the fly with jquery """ifrequest.POST:try:#iffromthenewformreturnsomethingtodisplaytherepostdic=request.POST['p_data']returnHttpResponse(simplejson.dumps({'response':'hi '+postdic}),mimetype="application/json")except:passtry:#iffromtheoldformcreatethenewformpostdic=request.POST['post_data']chunk="""<form id="p_form" method="POST" action="/web/tryit/"> <input class="mutt" type="text" name="some"/> <input type="submit" name="Register" class ="sub" value="Submit"> </form> </p>"""returnHttpResponse(simplejson.dumps({'response_text':chunk}),mimetype="application/json")except:passt=loader.get_template('web/tryit.html')c=RequestContext(request,{'request':request})returnHttpResponse(t.render(c))`Template:`{%extends"base.html"%}{%blockhead%}<scripttype="text/javascript"src="/sitemedia/js/jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){vardoit=function(){$('#post_form').submit(function(event){event.preventDefault();// cancel the default actionvarform=this;vardata={};data.post_data=$(form).find('input[@name=our_text]').val();$.post("/web/tryit/",data,function(responseData){//create the new form in the empty id "toappend"$("#toappend").replaceWith(responseData.response_text);//makesure the javascript knows about the new formdoit_newform();},"json");});}vardoit_newform=function(){$('#p_form').submit(function(event){event.preventDefault();// cancel the default actionvarform=this;vardata={};data.p_data=$(form).find('input[@name=some]').val();$.post("/web/tryit/",data,function(responseData){//show the new response from the server$(".mutt").attr('value',responseData.response);},"json");});}doit();});</script>{%endblock%}{%blockcentercontent%}<formid="post_form"method="post"action="/web/tryit/">Text:<inputid="hash"type="text"name="our_text"/><inputtype="submit"value="Add"/></form><pid="toappend"></p> {%endblock%}