How do I make $.serialize() take into account those disabled :input elements?

Question

It seems by default disabled input elements are ignored by $.serialize(). Is there a workaround?

Answer 1

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');

Answer 2

Use readonly inputs instead of disabled inputs:

<input name='hello_world' type='text' value='hello world' readonly />

This should get picked up by serialize().

Answer 3

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);

Answer 4

@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();

Answer 5

Try this:

<input type="checkbox" name="_key" value="value"  disabled="" />
<input type="hidden" name="key" value="value"/>

Answer 6

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);
    }
});

Answer 7

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.

Answer 8

In case someone don't want to activate them, then disable them again, you can also try to do this (I modified it from 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");

Answer 9

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")