Django ajax request

Question

I had a problem submitting a form using Ajax. I have a form that I want to replace with another form asynchronously when the next button is clicked.

Here is the script

$(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; }); }); 

form.py

 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') 

view

 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}) 

I want, when I press the next button in the county form, the arrival form will appear.

Answer 1

This can be solved in two ways: I will not distribute FormWizard, but I will give you a link to the documentation, which is really good.

My recommendation is that you should go to FormWizard (depending on which version of Django you have), but I think it was ported to Django in 1.2 onwards, but don't quote me on that.

In your current predicament, you must do something in accordance with this.

 $(document).ready(function() { $('#MY_FORM').submit(function() { $.ajax({ data: $(this).serialize(), type: $(this).attr('method'), url: $(this).attr('action'), success: function(response) { $('#FORM_DIV').load('/some/url/to/a/wardform'); //new code } }); return false; }); }); 

views.py

 def ward_form_renderer(request): if request.is_ajax(): ward_form = WardForm() #depending on version of django context = {'wardform': ward_form} context.update(csrf(request)) render(request, 'wardform_template', c) 

What this will do is that it will pull a new html page with a rendered form from your Django view and display it. Basically what you did is FormWizard. This approach will have other side effects, so I would not recommend doing it this way.

I myself am in a project that does this, and it’s a pain than a pleasure to be honest. I have not tried this code myself, but you understand how it should work.

Enter FormWizard! This is a special choice for you, since you do not need to redefine your forms, you can use the ones you have.

Here is a link to FormWizard docs

Good luck