title: An Easy way to submit Django Forms using Ajax jQuery
body: <p>I am relatively new to Ajax and I am still trying to grasp all the concepts. I've tried to look into a bunch of tutorials for Ajax-Django form submission, most of them require jQuery forms, which doesn't seem like an easy way to handle form submission to me. I am having a hard time grasping the concept.</p>
  
  <p>I am trying to write some ajax based form submissions for user registration, login, post creation and comments. And so far I havent found a way that makes it easier for me to understand how the Ajax approach would work.</p>
  
  <p>I would really appreciate any help that I can get in this regard. </p>
  
  <p>This is what I've tried so far.</p>
  
  <h1>change_pw.html</h1>
  
  <pre><code>{% extends "base.html" %}
      {% block title %}Change Password{% endblock %}
      {% block head %}Change Password{% endblock %}
      {% block content %}
      {% include "modal_change_pw.html" %}
      {% endblock %}
  </code></pre>
  
  <h1>modal_change_pw.html</h1>
  
  <pre><code>&lt;div id="modalchangepw"&gt;
  &lt;ul style="margin:5px;"&gt;
      &lt;ul class="thumbnails" style="margin: 0 auto;background: white;"&gt;
          &lt;div class="thumbnail row-fluid" style="background: white; padding: 10px;width: 97%; -moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:3px 3px 5px 0px #ccc;-webkit-box-shadow:3px 3px 5px 0px #ccc;box-shadow:3px 3px 5px 0px #ccc;"&gt;
              &lt;br&gt;
              {% if not error == '' %}
                  &lt;div class="alert alert-error"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
                      {{ error }}
                  &lt;/div&gt;
              {% endif %}
              {% if not success == '' %}
                  &lt;div class="alert alert-success"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
                      {{ success }}
                  &lt;/div&gt;
              {% endif %}
              {% if messages %}
                  {% for message in messages %}
                    &lt;div{% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
                      {{ message|safe }}
                    &lt;/div&gt;
                  {% endfor %}
              {% endif %}
              &lt;form id = 'changepw' enctype="multipart/form-data" method="post" action="."&gt;
                  &lt;p&gt;&lt;label for="id_currentpw"&gt;Current Password:&lt;/label&gt; &lt;input type="password" name="currentpw" id="id_currentpw" /&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="id_newpw1"&gt;New Password:&lt;/label&gt; &lt;input type="password" name="newpw1" id="id_newpw1" /&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="id_newpw2"&gt;Re-enter New Password:&lt;/label&gt; &lt;input type="password" name="newpw2" id="id_newpw2" /&gt;&lt;/p&gt;
                  &lt;input class="btn btn-primary" type="submit" value="submit"/&gt;
                  {% csrf_token %}
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>views.py</h1>
  
  <pre><code>def change_pw(request):
      user=request.user
      error=''
      success=''
      if request.method == 'POST':
          form = ChangePw(request.POST)
          if form.is_valid():
              currentpw=form.cleaned_data['currentpw']
              newpw1=form.cleaned_data['newpw1']
              newpw2=form.cleaned_data['newpw2']
              if currentpw and newpw1 and newpw2:
                  if user.check_password(currentpw):
                      if newpw1==newpw2:
                          user.set_password(newpw1)
                          user.save()
                          success='Password updated!!'
                          if request.is_ajax() :
                              messages.success(request, 'Password updated.')
                              return HttpResponseRedirect ('/changepw/')
                          else:
                              return HttpResponseRedirect ('/user/%s/' % user.username)
                      else:
                          error='New passwords do not match'
                  else:
                      error='Incorrect Current Password'
              else:
                  error='Enter all Password fields to make any changes' 
      else:
          form = ChangePw()
      variables = RequestContext(request, {
             'form':form,
             'error':error,
             'success':success
      })
      if request.is_ajax() :
           return render_to_response('modal_change_pw.html', variables)
      else:    
          return render_to_response('change_pw.html', variables)
  </code></pre>
  
  <h1>forms.py</h1>
  
  <pre><code>class ChangePw(forms.Form):
       currentpw = forms.CharField(
          label=u'Current Password',
          required=False,
          widget=forms.PasswordInput()
       )
       newpw1 = forms.CharField(
          label=u'New Password',
          required=False,
          widget=forms.PasswordInput()
       )
       newpw2 = forms.CharField(
          label=u'Re-enter New Password',
          required=False,
          widget=forms.PasswordInput()
       )
  </code></pre>
  
  <h1>jQuery</h1>
  
  <pre><code>//Change PW
          $('#changepw').live('submit', function(event) { // catch the form's submit event
            event.preventDefault();
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    $('#modalchangepw').html(response); // update the DIV
                }
            });
            return false;
          });
  </code></pre>
  
  <p>The code seems to work fine now.
  But my aim is to handle these forms in a modal popup fashion, so that the user doesn't have to leave the page he/she is currently on. In a modal-popup case, my form does not seem to be submitting the values.</p>