AJAX Post not sending form data

Question

I have the following AJAX POST below, for some reason looking at my logging (server side) the request it's sending is is blank {} not JSON data is sent. I have exhausted all possible server side issues this is a client side issue with the script not sending data. why?

bootstrap-wizard.js found here -> GitHub

My page code overrides the script submit:

<script src="{{ STATIC_URL }}js/bootstrap-wizard.js"></script>
<script type="text/javascript">
   $(function() {

       var options = {width:1000};
       var wizard = $("#some-wizard").wizard(options);

        $("#open-wizard").click(function() {
        wizard.show();
    });


wizard.on("submit", function(wizard) {

        $.ajax({
                  url: '/api/v1/rewards/campaigns/',
                  type: 'POST',
                  contentType: 'application/json; charset=UTF-8',
                  data: $('#wizard').serialize(),
                  beforeSend: function (request) {

                      request.setRequestHeader("X-CSRFToken", $('input[name="csrfmiddlewaretoken"]').val());
                  },

                  success: function(data, textStatus) {
                        wizard.submitSuccess(); // displays the success card
                        wizard.hideButtons(); // hides the next and back buttons
                        wizard.updateProgressBar(0); // sets the progress meter to 0

                      console.log('success');

                  },
                  error: function(errorThrown){
                     // data = JSON.parse(errorThrown.responseText);

                       wizard.submitError(); // display the error card
                       wizard.hideButtons(); // hides the next and back buttons


                      console.log(errorThrown);
                  }
              });



  });



   });



</script>

This is my form:

<form action="" method="post" class="form-horizontal" id="wizard" enctype="application/json" >
{% csrf_token %}

<div class="wizard" id="some-wizard">
   <h1>{% trans "Setup Wizard" %}</h1>


   <div class="wizard-card" data-cardname="card1">
      <h3>{% trans "General" %}</h3>

       etc, etc <=== all my form fields here

   </div>

have you tried to `console.log($('#wizard').serialize())` before the ajax request? does it contain the correct data? — Dziad Borowy, Oct 23 '13 at 10:24
@tborychowski the only thing outputs is csrfmiddlewaretoken=kr5Ixi1T62E9hhoUNabC1dAYvVXs5WeR no other data for the fields tho — GrantU, Oct 23 '13 at 10:31
Your Javascript variable `wizard` is a reference to the DIV not the form. So there is no `submit` for the `wizard` element. I cannot imagine that the $.ajax would be called at all — devnull69, Oct 23 '13 at 10:32

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

serialize() returns key/value formatted URL encoded data (x-www-form-urlencoded), not JSON. If your server side requires JSON then you need to change your data parameter:

$.ajax({
    ...
    data : JSON.stringify({ input_a : 'value a', input_b : 'value b' }),
    ...
});

See this question for how to convert a form into JSON automatically.

edited May 23 '17 at 11:50

Community

1
1

answered Oct 23 '13 at 10:31

MrCode

63,975
10
90
112

I see, in the script example they always just use data: $('#wizard').serialize() what you suggested works, but I'm a little confused – GrantU Oct 23 '13 at 10:35
1

Well `$('#wizard').serialize()` is valid if your server side is expecting x-www-form-urlencoded data, but not if it's expecting JSON. – MrCode Oct 23 '13 at 10:38
1

This is a common ambiguity with the acronym JSON. Generally, it specifies the way a literal object is written in Javascript. Today it mostly refers to the "string representation of a literal Javascript object". The former has no wrapping quotes whereas the second has ... `{...}` and `"{...}"` – devnull69 Oct 23 '13 at 10:38
2

@devnull69 `JSON` is and was `JavaScript Object Notation` (a string representation of an object) and I don't recall that the meaning has changed recently? What do you mean by "today ... mostly"? – Dziad Borowy Oct 23 '13 at 10:41
Are you sure that underscores work in object literal keys? My guess is that you need to wrap them in `''`/`""` – Johan Oct 23 '13 at 10:55
I mean that JSON originally means "the way Javascript represents object literals". It is NOT a string representation of an object, it is the object representation in the Javascript source code. If you STRINGIFY this object, you will get a JSON string, which is the string representation of the object literal that was originally written using JSON – devnull69 Oct 23 '13 at 13:17
btw ... this is what "ambiguous" means :-) – devnull69 Oct 23 '13 at 13:18

AJAX Post not sending form data

1 Answers1

Linked