How to pass another parameter in ajax?

Question

$.ajax({
    type: 'POST',
    url: '@Url.Action("SetDisplaySettings", "DisplaySettings")',
    data:$('#Form1').serialize(),
    success: function (result) {
        $('#chkIsSystemDefault').prop('checked', false);
        if(result=="2"){
           showAlertBox("Display Settings updated.");   
        }
    }
});

I need to pass another parameter CountryId. How can i do this?

Answer 1

Do as shown below in your current code (add data to the series itself): -

data:$('#Form1').serialize()+ '&CountryId=' +  CountryId,

Or you can use serializeArray ^[docs]

var data = $('#myForm').serializeArray();
data.push({name: 'CountryId', value:  CountryId});

Answer 2

You can transfer objectas your data:

$.ajax({
        type: 'POST',
        url: '@Url.Action("SetDisplaySettings", "DisplaySettings")',
        data:{
            form : $('#Form1').serialize(),
            other : ...
        },
        success: function (result) {
            $('#chkIsSystemDefault').prop('checked', false);
            if(result=="2")
            {
                showAlertBox("Display Settings updated.");   
            }
        }
    });

Answer 3

, , AJAX:

var paramsToSend = {};
paramsToSend['form'] = $('#myForm').serializeArray();
paramsToSend['CountryId'] = CountryId;

$.ajax({
    ...
    data: {params:JSON.stringify(paramsToSend)},
    ...
});

PHP, :

$parameters = json_decode($_POST['params']);

$_POST, :

$_POST = (array) $parameters;

Answer 4

$(...).serialize() FormData: FormData on MDN. - :

var data = new FormData( document.getElementById("#myForm") );
data.append( "CountryId", countryIdValue );
//... in AJAX block:
data: data,
//...