AJAX form submission hits proper endpoint but doesn't pass variables

Question

I'm working on the review page before a user buys a product, and on the page is a small field for discount codes, which I want to pass to an endpoint via ajax. I'm using the following javascript function, and the submission happens and returns (even hits the intended endpoint) - but no data gets passed through (verified in logs).

Any idea why no params would be getting passed through?

    <script>
  $("#discount_code_submit").click(function() {

    var url = "/confirm_discount"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#discount_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
                alert(data); // show response 
                if(data != "false")
                {
                    console.log(data);
                }
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>

score 1 · Accepted Answer · edited May 23 '17 at 11:51

This is because jQuery's serialize method creates a String representation of the form data, in the traditional url query string format. (Please see here: http://api.jquery.com/serialize/)
E.g., calling serialize can return a string such as:

'?query=help&numResults=200'

On the other hand, jQuery's ajax method expects the form data to be provided as an object literal. (Please see here: http://api.jquery.com/jQuery.ajax/)
E.g.

{
   query: 'help',
   numResults: 200
}

So you can change your ajax call to look like:

$.ajax({
       type: "POST",
       url: url,
       data: {
           param1: 'somevalue',
           param2: 200
       },
       success: function(data)
       {
            alert(data); // show response 
            if(data != "false")
            {
                console.log(data);
            }
       }
});

Or, you could also construct your object literal from the form using a custom function and then provide the reference in the ajax call.

$.ajax({
       type: "POST",
       url: url,
       data: myPreparedObjectLiteral,
       success: function(data)
       {
            alert(data); // show response 
            if(data != "false")
            {
                console.log(data);
            }
       }
});

You could also use http://api.jquery.com/serializeArray/ since it does pretty much what you'll need to convert a form to the json literal representation.

Finally, for a good discussion on converting forms to json objects for posting, you can see the responses here on an SO question: Convert form data to JavaScript object with jQuery

Thanks! This did work - but strangely, I couldn't use the dollar-sign selector to grab form input values to pass as data, but it worked with document.getElementById ... wonder why... — Aaron Marks, Oct 03 '13 at 06:23
@AaronMarks - If you share your selector expressions, I may be able to tell why it didn't pick anything. — , Oct 03 '13 at 07:28

AJAX form submission hits proper endpoint but doesn't pass variables

1 Answers1