CODEWITHSUNDEEP
javascriptjqueryajaxforms
Dizzy Bryan High
Dizzy Bryan High

Reputation: 2071

jquery sending form data and a json object in an ajax call

I'm making a call to another ajax page, the call posts a json object. I also need to send data from a form (not using submit - I have the ajax call attached to a button which uses e.preventDeault()).

The call is as folows:

var myUrl = 'sendswatch-data.php';
            $.ajax({
                url: myUrl,
                data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
                type: "POST",
                error: function(xhr, statusText, errorThrown){
                    // Work out what the error was and display the appropriate message
                },
                success: function(myData){
                    $('#tabsampleorder').html(myData);
                    $('.tabber').hide();
                    $('#tabsampleorder').show();
                }
            });

I have a form on the page id of formdata.

How do I send this as well as the json object? I've tried

data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},

but that's generating an error.

Upvotes: 0

Views: 4214

Answers (2)

Leons
Leons

Reputation: 2674

You can send data from the form as follows:

data : { swatchid: swatchArray, formdata: $('#orderData').serialize() }

You will need a parameter in the controller for every field that your add.

Upvotes: 2

Richard Dalton
Richard Dalton

Reputation: 35803

You have an extra } after watchArray. Try removing that.

data: {'swatchid[]':swatchArray, 'formdata':$('#orderData').serialize()},

Upvotes: 5

Related Questions