django form wizard ajax next step - ajax

Question

I am creating a 9-step proposal form using django form wizard. All is well, until I wanted to use ajax to load the next step. I'm having a hard time configuring the ajax call in jquery because django forms don't have action url included in the form tag. Why is it like that anyway? A win-win situation for me is to have a loading screen for next step and if there is an upload file process in the step, show percentage loading for the uploaded file. Thanks!

Answer 1

I'm using this code, and It's working for me. I don't put any action inside the form, as you can see. I use the jquery 'on' function when the form is submited because all the form is reloading and changing inside the div#creation. Then the ajax url must be the one that displays your form.
In my case, the first step of the form is rendered also through ajax with get, when I click on some button. That's why there's isn't any form in the div at first. (I'm using bootstrap's modals).
<div id="creation">
<!-- form to be display through ajax -->
</div>
The template that is reload in the FormWizard Class in views is the following html:
template_name = 'creation_form.html'
Code por creation_form.html:
<form id="creation-form" action="#" method="post">
{% csrf_token %}
<table>
{{ wizard.management_form }}
{{ wizard.form }}
</table>
{% if wizard.steps.prev %}
<button name="wizard_goto_step" class="btn btn-primary" aria- hidden="true" type="submit" value="{{ wizard.steps.first}}">First</button>
<button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
{% endif %}
<input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>
Here is my ajax call:
$('#creation').on('submit', '#creation-form' , function(e){
e.preventDefault();
var fd = new FormData($('#creation-form').get(0));
$.ajax({
url: '/create/',
data: fd,
type: "POST",
success: function(data){
$('#creation').html(data);
},
processData: false,
contentType: false
});
});
Hope this is a proper response for your answer.
I'm currently having a hard time going to the first/previous step, if you figure it out please tell me how.
This is what you're looking for?

Answer 2

Here's what I did-
Created separate model forms for each step.This helped in easy server side validation.
Made ajax calls for each step to validate form on the server side and on success render the next form and hide the previous form.
On submit of last form async POST the data for persistence and processing and render the response asynchronously below the last step.
Also maintained a progress bar for each step.
This is how I created my async form wizard using django forms. Not neat but works! :)