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

JquerySerialization

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionfmsView Question on Stackoverflow
Solution 1 - Jqueryuser113716View Answer on Stackoverflow
Solution 2 - JqueryAndrewView Answer on Stackoverflow
Solution 3 - JqueryKrzysiekView Answer on Stackoverflow
Solution 4 - JqueryAaron HudonView Answer on Stackoverflow
Solution 5 - JqueryKennyKamView Answer on Stackoverflow
Solution 6 - JqueryDavid162795View Answer on Stackoverflow
Solution 7 - JqueryJason LewisView Answer on Stackoverflow
Solution 8 - JquerymaximranView Answer on Stackoverflow
Solution 9 - JqueryCarl VerretView Answer on Stackoverflow