How can I pass form data AND my own variables via jQuery Ajax call?

Question

Here is my working code:

jQuery.ajax({
type: 'post',
url: ajaxurl,
dataType: 'json',
data: jQuery('select[name^="option"], :input[name^="option"]),
success: function (mydata) {
    // do something
}
});

I want to add a variable to be passed back along with the select and textbox option values called 'myVar'. But I don't see it in the parameters when I add it:

var myVar = '123';

jQuery.ajax({
type: 'post',
url: ajaxurl,
dataType: 'json',
data: jQuery('select[name^="option"], :input[name^="option"], myvar='+myVar),
success: function (mydata) {
    // do something
}
});

Am I doing something wrong? Do I need to serialize or encodeURIcomponent or something? Nothing seems to affect it. I still get the select and textbox data, but myVar doesn't come at all in the $_POST side.

Thoughts?

Answer 1

Have you tried:

 var myVar = '123';
 jQuery.ajax({
    type: 'post',
    url: ajaxurl,
    dataType: 'json',
    data: jQuery.param(jQuery('select[name^="option"]').val()) + jQuery.param(jQuery('input[name^="option"]').val()) + '&myvar=' + myVar,
    success: function (mydata) {
        // do something
    }
  });

I think you can also use traditional: true instead of param