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.

Answer 1

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

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

Answer 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.