Login

simple jquery example

Author:
lawgon
Posted:
April 23, 2008
Language:
JavaScript
Version:
Not specified
Tags:
ajax jquery
Score:
0 (after 0 ratings)

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
View:

def tryit(request):
    """
    Create a form on the fly with jquery
    """
    if request.POST:
        try:
            #if from the new form return something to display there
            postdic = request.POST['p_data']
            return HttpResponse(simplejson.dumps({'response': 'hi '+postdic}),
                mimetype="application/json")
        except:
            pass
        try:
            #if from the old form create the new form
            postdic = 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>"""
        
            return HttpResponse(simplejson.dumps({'response_text':chunk}),
            mimetype="application/json")
        except:
            pass
    t = loader.get_template('web/tryit.html')
    c = RequestContext(request,{'request':request})
    return HttpResponse(t.render(c))`

Template:

`{% extends "base.html" %}
{% block head %}
<script type="text/javascript" src="/sitemedia/js/jquery.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
	var doit = function() {$('#post_form').submit(function(event){
            event.preventDefault(); // cancel the default action
            var form = this;
            var data = {};
            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 form
                 doit_newform();
                },
                "json");            
        });}
	var doit_newform = function() {$('#p_form').submit(function(event){
            event.preventDefault(); // cancel the default action
            var form = this;
            var data = {};
			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 %}
{% block centercontent %}
 <form id="post_form" method="post" action="/web/tryit/">
      Text: <input id="hash" type="text" name="our_text" />
      <input type="submit" value="Add" />
    </form>
 <p id="toappend"></p>   
 
{% endblock %}

More like this

  1. Multiple-Submit-Button Widget for Choice Field by Archatas 6 years, 7 months ago
  2. Submit button as a form field by roxeteer 4 years, 1 month ago
  3. Adding buttons to submit line in a Admin page by marinho 6 years, 9 months ago
  4. Radio widget with labels after inputs by avsd 2 years, 7 months ago
  5. models ColorField with clean minimal widget by andybak 3 years, 9 months ago

Comments

Please login first before commenting.