Django form wizard with Ajax

Question

I'm trying to use form wizard through ajax. I have a separated template that first is loaded when a user want to start using the form. And then is reloaded through ajax until it's completed.

First ajax call to load the form:

$('#create-modal').click(function(){
   $.ajax({
        type: "GET",
        url:"/create/",
        data:{
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        success: function(data){
            $('#creation').html(data);
        },
        dataType: 'html'
    });
});

Here it is the ajax call to reload the submits:

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

The form can be completed and save into the database just fine but what the previous step button isn't working, it just keeps going foward to the form when I click it.

<button class="btn btn-primary" aria-hidden="true" type="submit" name="wizard_goto_step" value="{{ wizard.steps.prev }}">Previous</button>

and all other variants, last, first...

I'm not including all the code because when I call the url directly from the browser the previous button works just fine. That is when I call it form /create/ rather than the url where the ajax are.

Request headers for both ajax (not working) and without ajax (working). http://snipt.org/AOC9.

Answer 1

I have never used FormData so I don't know if that's the source of the problem or not. Anyway I would recommend you to change the code to somewhat like this:

$('#creation').on('submit', '#creation-form' , function (e) {
    e.preventDefault();

    var post_data = $(this).serialize();
    console.log('POST data:' + post_data);

    $.ajax({
      url: '/create/',
      data: post_data,
      type: "POST",
      success: function (resp) {
          console.log(resp);
          $('#creation').html(resp);
      },
      error: function (jqXHR, textStatus, errorThrown) {
          console.log(jqXHR);
          console.log(textStatus);
          console.log(errorThrown);
      }
      processData: false,
      contentType: false
    });
});

If it doesn't work, check the console and you will know why it fails yourself.