简体   繁体   中英

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":""}}

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM