CODEWITHSUNDEEP
javascriptjquery
Jeff Antosh
Jeff Antosh

Reputation: 23

jquery 2.2 serializeArray() working in Firefox, Chrome, but not IE(11)

I have a form which I need to serialize. It works perfectly in Chrome and FireFox, but doesn't work at all in IE11. I have narrowed down the issue to serializeArray() returning an empty array.

    JSON.stringify($("#enrollmentForm").find($("fieldset")).eq(0).serializeArray());

I have created a jsfiddle where I have greatly simplified my code and form in order to track down the issue: https://jsfiddle.net/xu8LpmLr/5/

Results in chrome:

[{"name":"id","value":"0"},{"name":"address1","value":""},{"name":"address2","value":""},{"name":"city","value":""},{"name":"state","value":""},{"name":"zip","value":""}]

Results in IE:

[]

UPDATE: Thanks to Rion Williams for his response. I have multiple fieldsets in my form and I needed only the address info, so I modified my code to only serialize the fields I need (I am also splitting the zip into 2 parts):

var enteredAddressData = function() {
    var data = $("#enrollmentForm").serializeArray().reduce(function(obj, item) {
        var arrayOfAddressElements = ['id','address1','address2','city','state','zip'];
        if (arrayOfAddressElements.indexOf(item.name) >= 0) {
            if (item.name === 'zip') {
                var zipParts = item.value.split('-');
                obj['zip5'] = zipParts[0];
                if (zipParts.length > 1) {
                    obj['zip4'] = zipParts[1];
                } else {
                    obj['zip4'] = '';
                }
            } else {
                obj[item.name] = item.value;
            }
        }
        return obj;
    }, {});

    return { 'address': data };
};

Result:

JSON.stringify(enteredAddressData())

{"address":{"id":"0","address1":"address1value","address2":"address2value","city":"cityvalue","state":"il","zip5":"60191","zip4":""}}

Upvotes: 0

Views: 1009

Answers (1)

Rion Williams
Rion Williams

Reputation: 76577

The documentation for the serializeArray() function explicitly states that it only operates on a jQuery collection of forms and/or form controls, which might explain why the often "rule-following" Internet Explorer might reject it.

Try serializing the actual <form> itself instead of the underlying fieldset, which appears to work as expected : 

JSON.stringify($("#enrollmentForm").serializeArray())

Upvotes: 1

Related Questions