Disabled fields not picked up by serializeArray

Question

(Question updated to reflect real issue)

I just realized that serializeArray is not fetching content from disabled fields.

A set of (street) address fields are populated by selecting an item from a autosuggest list. Once this is done, the fields are disabled. I could change this to read only, but I want the disabled look and feel without having to change CSS.

Is there a way to have serializeArray grab data fro, the disabled fields?

Solution

Thanks to Mohammad, I created a small plugin that helps me solve my issue:

(Fiddle)

    var form_data = $('form').serializeAll();

    (function ($) {
      $.fn.serializeAll = function () {
        var data = $(this).serializeArray();

        $(':disabled[name]', this).each(function () { 
            data.push({ name: this.name, value: $(this).val() });
        });

        return data;
      }
    })(jQuery);

do you have name attribute in your dynamically added element's — Adil Shaikh, Apr 11 '13 at 20:59
Yes. All input fields that needs to be submitte4d has t he name attribute. Oh, one imporatnt note, the fields are disabled! (sorry - I'll update Q) — Steven, Apr 11 '13 at 21:00
That is the reason why serializeArray doesn't pick those element's — Adil Shaikh, Apr 11 '13 at 21:04
Possible duplicate of [How to make $.serialize() take into account those disabled :input elements?](https://stackoverflow.com/questions/4748655/how-to-make-serialize-take-into-account-those-disabled-input-elements) — BlaM, Aug 14 '17 at 08:08

Adil Shaikh · Accepted Answer · 2013-04-11T21:41:26.093

61

Try this

var data = $('form').serializeAllArray();

And here is the small plugin that is used

(function ($) {
  $.fn.serializeAllArray = function () {
    var obj = {};

    $('input',this).each(function () { 
        obj[this.name] = $(this).val(); 
    });
    return $.param(obj);
  }
})(jQuery);

You can also try enabling all your element's just to serialize them and then disable them after serializing.

var myform = $('#form');
var disabled = myform.find(':input:disabled').removeAttr('disabled');
var serialized = myform.serializeArray();
disabled.attr('disabled','disabled');

edited Apr 11 '13 at 21:41

answered Apr 11 '13 at 21:09

Adil Shaikh

44,509
17
89
111

1

What would really make the day, was if you moved the `serializeArray` inside the new plugin and concatinated the data there. Then all I needed to do is `data = $('form').serializeAllArray()`. – Steven Apr 11 '13 at 21:13
@Steven I know its been a couple years, but could you explain the this reference on line 11? Why do you need that in the select? – NorCalKnockOut Mar 23 '17 at 16:13
@NorCalKnockOut, you now, I can't actually remember how `$(':disabled[name]', this).each()` works. I'm out of shape on my jQuery. Sorry :-/ – Steven Mar 23 '17 at 19:26
@Steven I figured it out. this is the reference to the form itself. – NorCalKnockOut Mar 24 '17 at 21:31
@MohammadAdil this handles only the input tags and not select and textarea tags – Ridhuvarshan Jan 24 '18 at 10:30
It would have been helpful if this answer noted that it returns results in an entirely different format than the function it is designed to replace. – user1445967 Feb 19 '20 at 01:52
Also worth noting that inputs in disabled fieldsets are excluded also. Workarond is similar: `var disabled_fs = $(this).find('fieldset:disabled').removeAttr('disabled'); var data = $(this).serializeArray(); disabled_fs.attr('disabled',true);` – gramgram Mar 02 '20 at 08:29

score 20 · Answer 2 · answered Jun 22 '16 at 04:00

20

you can use readonly serializeArray() can read it.

answered Jun 22 '16 at 04:00

user6497164

201
2
3

2

Unfortunately `readonly` doesn't work on – sp00n Jan 25 '18 at 18:17

score 0 · Answer 3 · answered Nov 30 '20 at 06:29

0

This is expected behavior and won't be fixed. Here is a workaround

function serializeJSONIncludingDisabledFields (form) {
  var fields = form.find('[disabled]');
  fields.prop('disabled', false);
  var json = form.serializeJSON();
  fields.prop('disabled', true);
  return json;
}

Link to the issue

answered Nov 30 '20 at 06:29

Sajidur Rahman

2,764
1
27
26

I have to make it form.serializeArray to make it work for my form. – Sunny Oct 03 '21 at 15:33

score -1 · Answer 4 · answered Apr 27 '18 at 09:01

-1

$('#field').removeAttr('disabled');
var formData = $(this).serializeArray();
$('#field').attr('disabled', 'disabled');

The solution above is better - alternatively you can just remove the disabled attribute from the element, serialize the fields then re-add the attribute.

answered Apr 27 '18 at 09:01

Edmunds22

715
9
10

The above should use .prop() instead of .removeAttr() and .attr(). – Mad Man Moon Jan 03 '19 at 19:33

Disabled fields not picked up by serializeArray

4 Answers4

Linked