Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p>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).</p> <pre><code>&lt;div id="creation"&gt; &lt;!-- form to be display through ajax --&gt; &lt;/div&gt; </code></pre> <p>The template that is reload in the FormWizard Class in views is the following html:</p> <pre><code>template_name = 'creation_form.html' </code></pre> <p>Code por creation_form.html:</p> <pre><code>&lt;form id="creation-form" action="#" method="post"&gt; {% csrf_token %} &lt;table&gt; {{ wizard.management_form }} {{ wizard.form }} &lt;/table&gt; {% if wizard.steps.prev %} &lt;button name="wizard_goto_step" class="btn btn-primary" aria- hidden="true" type="submit" value="{{ wizard.steps.first}}"&gt;First&lt;/button&gt; &lt;button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}"&gt;Previous&lt;/button&gt; {% endif %} &lt;input id="create-submit" class="btn btn-primary" type="submit" value="submit" /&gt; &lt;/form&gt; </code></pre> <p>Here is my ajax call:</p> <pre><code>$('#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 }); }); </code></pre> <p>Hope this is a proper response for your answer. </p> <p>I'm currently having a hard time going to the first/previous step, if you figure it out please tell me how.</p> <p>This is what you're looking for?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload