jQuery: serialize() form and other parameters

JqueryAjaxFormsSerialization

Jquery Problem Overview


Is it possible to send form elements (serialized with .serialize() method) and other parameters with a single AJAX request?

Example:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
	    par1 : 1,
	    par2 : '2',
	    par3: 232
    }
}

If not what's the best way to submit a form together with other parameters?

Thanks

Jquery Solutions


Solution 1 - Jquery

serialize() effectively turns the form values into a valid querystring, as such you can simply append to the string:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}

Solution 2 - Jquery

Alternatively you could use form.serialize() with $.param(object) if you store your params in some object variable. The usage would be:

var data = form.serialize() + '&' + $.param(object)

See http://api.jquery.com/jQuery.param for further reference.

Solution 3 - Jquery

I dont know but none of the above worked for me, Then i used this and it worked :

In form's serialized array it is stored as key value pair

We pushed the new value or values here in form variable and then we can pass this variable directly now.

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

Solution 4 - Jquery

If you want to send data with form serialize you may try this

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);
    
    }
});

Solution 5 - Jquery

$("#add_form").submit(function(e) {
    e.preventDefault();
    var total_qty = $('#total_qty').text();
    var total_amt = $('#total_amt').text();
       
    $("#add_btn").val('adding....');
    $.ajax({
        url: 'action.php',
        method: 'post',
        data: $(this).serialize() + "&total_qty="+total_qty + "&total_amt="+total_amt,
        success: function(data){
            console.log(data);
        }   
    });
});

Solution 6 - Jquery

pass value of parameter like this

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

and so on.

Solution 7 - Jquery

Following Rory McCrossan answer, if you want to send an array of integer (almost for .NET), this is the code:

// ...

url: "MyUrl",		//	For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
	$('#myForm').serialize() +
	"&param1="xxx" +
	"&param2="33" +
	"&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

Solution 8 - Jquery

encode in js :

  var temp = 	$("#pay_property_amount").serialize();
			temp = btoa(temp);

and pass in ajex

 data: { temp_data : temp },

decode in php

	$temp_data = base64_decode($this->input->post('temp_data'));

 if($temp_data){
$temp_data = $this->unserializeForm($temp_data);
 }


function unserializeForm($str) {
$returndata = array();
$strArray = explode("&", $str);
$i = 0;
foreach ($strArray as $item) {
    $array = explode("=", $item);
	
	if (preg_match('/(%5B%5D)/', $array[0])) {
	      $array[0] = str_replace('%5B%5D','',$array[0]);
		  if(array_key_exists($array[0],$returndata)){
			  	  $returndata[$array[0]][]=$array[1];
		  }else{
			  $returndata[$array[0]] =array();
			  $returndata[$array[0]][]=$array[1];
		  }
	}else
	{
		$returndata[$array[0]] = $array[1];
	}
	
    
}

return $returndata;
}

Solution 9 - Jquery

You can also use serializeArray function to do the same.

Solution 10 - Jquery

You can create an auxiliar form using jQuery with the content of another form and then add thath form other params so you only have to serialize it in the ajax call.

function createInput(name,value){
    return $('<input>').attr({
	    name: name,
	    value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

Solution 11 - Jquery

I fix the problem with under statement ; send data with url same GET methode

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

and get value with $_REQUEST['value'] OR $_GET['id']

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKenavRView Question on Stackoverflow
Solution 1 - JqueryRory McCrossanView Answer on Stackoverflow
Solution 2 - JquerykliszaqView Answer on Stackoverflow
Solution 3 - JqueryRohit AroraView Answer on Stackoverflow
Solution 4 - Jquery4302836View Answer on Stackoverflow
Solution 5 - Jquerysh shojolView Answer on Stackoverflow
Solution 6 - JquerySanjayView Answer on Stackoverflow
Solution 7 - JqueryDaniView Answer on Stackoverflow
Solution 8 - JquerySalim MansooriView Answer on Stackoverflow
Solution 9 - JquerySuresh PrajapatView Answer on Stackoverflow
Solution 10 - JqueryFelixukoView Answer on Stackoverflow
Solution 11 - JqueryAziz FazliView Answer on Stackoverflow