title: django ajax request
body: <p>I am having a problem sending a form with Ajax. I have a form which i want to replace with another form asynchronously on clicking the next button.</p>
  
  <p>Here is the script</p>
  
  <pre><code>$(document).ready(function() {
      $('#MY_FORM').submit(function() { 
          $.ajax({
              data: $(this).serialize(), 
              type: $(this).attr('method'),
              url: $(this).attr('action'), 
              success: function(response) { 
                  $('#FORM_DIV').html(response); 
              }
          });
          return false;
      });
  });
  </code></pre>
  
  <p>form.py</p>
  
  <pre><code>class CountyForm(forms.Form):
      county = forms.ModelChoiceField(queryset=County.objects.all(),
                empty_label='---Select a county---', required=False)
      other = forms.CharField(required=False)
  
      def __init__(self, *args, **kwargs):
          super(CountyForm, self).__init__(*args, **kwargs)
          self.helper = FormHelper(self)
          self.helper.html5_required = True
          self.helper.form_id = 'MY_FORM'
          self.helper.add_input(Submit('next', 'Next', css_class='classfinish'))
          self.helper.layout = Layout('county','other')
  
  
  class WardForm(forms.Form):
      ward = forms.ModelChoiceField(queryset=Ward.objects.all(),
               empty_label='Select a ward')
      other = forms.CharField()
  
      def __init__(self, *args, **kwargs):
          super(WardForm, self).__init__(*args, **kwargs)
          self.helper = FormHelper(self)
          self.helper.html5_required = True
          self.helper.add_input(Submit('save', 'Finish'))
          self.helper.add_input(Submit('cancel', 'Cancel'))
          self.helper.layout = Layout('ward','other')
  </code></pre>
  
  <p>views</p>
  
  <pre><code>def location(request):
      if request.is_ajax() :
          wardform = WardForm()
          return HttpResponse(wardform)
      countyform = CountyForm()
      c = {}
      c.update(csrf(request))
      return render(request,'location.html', {'countyform': countyform})
  </code></pre>
  
  <p>I want when i click next button in the county form, the ward form to appear.</p>