How do I modify serialized form data in jQuery?
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 = $("#frmblog").serialize();values += "&content=" + encodeURIComponent(content_val);
(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.)
Alternately, if you like, you can use serializeArray
and then add to the array and use jQuery.param
to turn the result into a query string, but that seems a long way 'round:
// You can also do this, but it seems a long way 'roundvar values = $("#frmblog").serializeArray();values.push({ name: "content", value: content_val});values = jQuery.param(values);
Update: In a comment added later you said:
The problem is, there is some default values being set in the 'content' key during the serilization process, so I can't just attach a new value, I have to update the one already in it"
That changes things. It's a pain to look for content
within the URL-encoded string, so I'd go with the array:
var values, index;// Get the parameters as an arrayvalues = $("#frmblog").serializeArray();// Find and replace `content` if therefor (index = 0; index < values.length; ++index) { if (values[index].name == "content") { values[index].value = content_val; break; }}// Add it if it wasn't thereif (index >= values.length) { values.push({ name: "content", value: content_val });}// Convert to URL-encoded stringvalues = jQuery.param(values);
You'd probably want to make this a reusable function.
Here is a full jquery plugin based on @T.J's answer. You can call
$('form#myForm').awesomeFormSerializer({ foo: 'bar',})
Which will replace or add the param 'foo' with value 'bar' (or any other param you add in the object)
jQuery plugin :
// Not builtin http://stackoverflow.com/a/5075798/2832282(function ( $ ) { // Pass an object of key/vals to override $.fn.awesomeFormSerializer = function(overrides) { // Get the parameters as an array var newParams = this.serializeArray(); for(var key in overrides) { var newVal = overrides[key] // Find and replace `content` if there for (index = 0; index < newParams.length; ++index) { if (newParams[index].name == key) { newParams[index].value = newVal; break; } } // Add it if it wasn't there if (index >= newParams.length) { newParams.push({ name: key, value: newVal }); } } // Convert to URL-encoded string return $.param(newParams); }}( jQuery ));
With ES15 now.You can use this instead one for editing current submitted value (the shortest one)
var values = $("#frmblog").serializeArray();values.find(input => input.name == 'content').value = content_val;console.log(values);
or native function
var values = $("#frmblog").serializeArray();values.find(function(input) { return input.name == 'content';}).value = content_val;console.log(values);