How do I make $.serialize() take into account those disabled :input elements?
JquerySerializationJquery Problem Overview
It seems by default disabled input elements are ignored by $.serialize()
. Is there a workaround?
Jquery Solutions
Solution 1 - Jquery
Temporarily enable them.
var myform = $('#myform');
// Find disabled inputs, and remove the "disabled" attribute
var disabled = myform.find(':input:disabled').removeAttr('disabled');
// serialize the form
var serialized = myform.serialize();
// re-disabled the set of inputs that you previously enabled
disabled.attr('disabled','disabled');
Solution 2 - Jquery
Use readonly inputs instead of disabled inputs:
<input name='hello_world' type='text' value='hello world' readonly />
This should get picked up by serialize().
Solution 3 - Jquery
You can use a proxied function (it affects both $.serializeArray()
and $.serialize()
):
(function($){
var proxy = $.fn.serializeArray;
$.fn.serializeArray = function(){
var inputs = this.find(':disabled');
inputs.prop('disabled', false);
var serialized = proxy.apply( this, arguments );
inputs.prop('disabled', true);
return serialized;
};
})(jQuery);
Solution 4 - Jquery
@user113716 provided the core answer. My contribution here is just a jQuery nicety by adding a function to it:
/**
* Alternative method to serialize a form with disabled inputs
*/
$.fn.serializeIncludeDisabled = function () {
let disabled = this.find(":input:disabled").removeAttr("disabled");
let serialized = this.serialize();
disabled.attr("disabled", "disabled");
return serialized;
};
Example usage:
$("form").serializeIncludeDisabled();
Solution 5 - Jquery
Try this:
<input type="checkbox" name="_key" value="value" disabled="" />
<input type="hidden" name="key" value="value"/>
Solution 6 - Jquery
I can see a few workarounds, but still no-one suggested writing your own serializing function? Here you go: https://jsfiddle.net/Lnag9kbc/
var data = [];
// here, we will find all inputs (including textareas, selects etc)
// to find just disabled, add ":disabled" to find()
$("#myform").find(':input').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
//is name defined?
if(typeof name !== typeof undefined && name !== false && typeof val !== typeof undefined)
{
//checkboxes needs to be checked:
if( !$(this).is("input[type=checkbox]") || $(this).prop('checked'))
data += (data==""?"":"&")+encodeURIComponent(name)+"="+encodeURIComponent(val);
}
});
Solution 7 - Jquery
Disabled input elements don't get serialized because 'disabled' means they shouldn't be used, per W3C standard. jQuery is just abiding by the standard, even though some browsers don't. You can work around this, by adding a hidden field with a value identical to the disabled field, or by doing this via jQuery, something like this:
$('#myform').submit(function() {
$(this).children('input[hiddeninputname]').val($(this).children('input:disabled').val());
$.post($(this).attr('url'), $(this).serialize, null, 'html');
});
Obviously, if you had more than one disabled input, you'd have to iterate over matching selectors, etc.
Solution 8 - Jquery
In case someone don't want to activate them, then disable them again, you can also try to do this (I modified it from https://stackoverflow.com/questions/15958671/disabled-fields-not-picked-up-by-serializearray, from using a plugin to using a normal function):
function getcomment(item)
{
var data = $(item).serializeArray();
$(':disabled[name]',item).each(function(){
data.push({name: item.name,value: $(item).val()});
});
return data;
}
So you can call them like this:
getcomment("#formsp .disabledfield");
Solution 9 - Jquery
Just over Aaron Hudon :
Maybe you've got something else than Input (like select), so I changed
this.find(":input:disabled")
to
this.find(":disabled")