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

Question

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.

score 5 · Accepted Answer · answered May 09 '11 at 14:52

5

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

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

answered May 09 '11 at 14:52

Richard Dalton

35,513
6
73
91

Is there any way to do this that doesn't require you to explicitly name the field name ('formdata') as a key? – zakdances Oct 16 '11 at 00:49

score 2 · Answer 2 · answered May 09 '11 at 14:53

2

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.

answered May 09 '11 at 14:53

Leons

2,679
1
21
25

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

2 Answers2

Linked