Adding additional Parameter in Serialize Form Data

Posted By : Mohit Sharma | 12-Dec-2017

jquery

Hi Guys, there are situations, when you have an Html form with some data in it and you have to submit the data using Jquery Ajax Call.

Now If we only need to submut the form data ,it's not an issue but In most of the cases we need to add adddional data with our form. We all have encountered such situation in our web development career.

Here is how you can add additional data to serialized form object. Well there are couple of ways to achieve it. Let's assume we have a form:

Now, Let's serialize it using jquery

$( "#form1" ).on( "submit", function( event ) {
  event.preventDefault();

  var payload = $( this ).serialize() );
  // this will create a  method creates a text string in standard URL-encoded notation 

  // Now we will add additional parameter id in our payload
  // Method 1:  By simply appending to the url string
  payload+ "&id=" + 12

  // Method 2: If you are using Arrays() ,You need to use serializeArray()  Then you can use
  var payload = $('#form1').serializeArray();
  data.push({name: 'id', value: 12});

  // Method 3: By serializeObject
  var payload = $JQ("#moveFolderForm").serializeObject();
  payload.id = 1;


});

Here is an full working example for jquery form serialization If you want to append data to existing form you can do it here as mentioned above:

var datastring = $("#form").serialize();
$.ajax({
    type: "POST",
    url: "your url",
    data: datastring,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handing here');
    }
});