JQuery - Appending to Serialize

Question

I am trying to figure out how to append two more values to the serialize method in JQuery. I have the following code to submit a form with ajax and have two more variables that I would like to append:

Thank you!

    ...
    var formData = $('#contact_form').serialize();
    submitForm(formData);

    // -----------------------------------------------
    // AJAX FORM SUBMIT
    // -----------------------------------------------
    function submitForm(formData){
        $.ajax({    
            type: 'POST',
            url: 'contact.php',
            data: formData,
            dataType: 'json',
            cache: false,
            timeout: 7000,
            success: function(data) {
                // display success message
                response(data.msg,'show');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                ...
            },              
            complete: function(XMLHttpRequest, status) { 
                ...
            }
        });
    }

Portly

Answer 1

If you change serialize() to serializeArray() you can push values into the array :

var formData = $('#contact_form').serializeArray();
formData.push({ name: "<something>", value: "<somevalue>" });
submitForm(formData);

The data can still be sent in the same way as you would with the serialize() method, using the $.ajax() method

Deitz

I've modified it like this but firebug tells me that push is not a function: var formData = $('#contact_form').serializeArray(); formData.push({name:"cat", value: selectedCat}).serialize(); formData.push({name:"subcat", value: selectedSubCat}).serialize(); submitForm(formData); – Portly

@Portly works fine for me : jsfiddle.net/manseuk/BHXxx do your form inputs have name attributes ? – Deitz

My form inputs are working fine. I need to append the values of two extra variables to the serialize method. – Portly

Seems not to work if the from data is stored in Form Input Arrays. – Bespread

@Falcon is right, his link works (see second answer from top). This doesn't work for me, sadly I can't downvote anymore. – Plasty

Answer 2

You can add new values by appending to your variable:

formData += '&var1=blah&var2=blah';

Stickney

Answer 3

before serialize form, append an input element

$("#form").append(`<input type="hidden" name="a" value="${b}"/>`);

Stopover

Answer 4

$( "#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;


});

from https://www.oodlestechnologies.com/blogs/adding-additional-parameter-in-serialize-form-data/ There are several ways, depending on use

Shahjahanpur