How to modify serialized form data in jQuery

The .serialize() method creates a text string in standard URL-encoded notation.
It can act on a jQuery object that has selected individual form controls, such as input ,textarea and select

$("input, textarea, select").serialize();

In serialize method form’s element will be included if it have name attribute, for checkbox and radio types it will included if they are checked and value of types button and submit will not be included in serialize string.

serialize returns a URL-encoded string containing the form fields.
If you need to append to it, you do so using the standard URL-encoded string rules, e.g.:

var values = $("#formid").serialize();
values += "&content=" + encodeURIComponent("othervalue");

The above assumes there will always be one value in values after the serialize call;
if that’s not necessarily true, determine whether to use & based on whether values is empty before you add to it.

There is also an alternative you can use serializeArray and then add to the array and use jQuery.param to turn the result into a query string, but you have to write more lines of code to do this:-

var values = $("#formid").serializeArray();
values.push({
name: "content",
value: "othervalue"
});
values = jQuery.param(values);

but there is problem there may be some default value can be set to same key (i.e content) so you can check key in array before push into array :

var value,index,exists=false;
//check if content key already exists then replace
for (index = 0; index < values.length; ++index) {
if (values[index].name == "content") {
values[index].value = "other value";
exists=true;
break;
}
}

//push key if it wasn't exists
if (!exists) {
values.push({
name: "content",
value: "other value"
});
}
//Convert it to URL-encoded string
values = jQuery.param(values);

You can make it function to reusable.
Please comment and share if it help you. Suggestions are aways welcome
Thanks

Add a Comment

Your email address will not be published. Required fields are marked *