Jquery $(':input').serializearray(); Function Using Native Api

How may I write this jQuery function ( or rather, produce the same result ), using only JavaScript? $(':input').serializeArray(); Function docs.

Solution 1:

Look at jQuery's implementation:

function serializeArray() {
    returnthis.map(function () {
        // Can add propHook for "elements" to filter or add form elementsvar elements = jQuery.prop(this, "elements");
        return elements ? jQuery.makeArray(elements) : this;
    }).filter(function () {
        var type = this.type;
        // Use .is(":disabled") so that fieldset[disabled] worksreturnthis.name && !jQuery(this).is(":disabled") && rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) && (this.checked || !manipulation_rcheckableType.test(type));
    }).map(function (i, elem) {
        varval = jQuery(this).val();

        returnval == null ? null : jQuery.isArray(val) ? jQuery.map(val, function (val) {
            return {
                name: elem.name,
                value: val.replace(rCRLF, "\r\n")
            };
        }) : {
            name: elem.name,
            value: val.replace(rCRLF, "\r\n")
        };
    }).get();
}

Of course, this assumes that this is a jQuery object with methods like .filter() and .map(). These methods are also available to Arrays in ECMAScript 5, so if you don't need to support IE < 9, this code might work where this is an Array of HTMLElements — after removing or rewriting the corner cases that jQuery handles. If you need to support old browsers, then you probably should just use jQuery.

Solution 2:

The jQuery :input selector is equivalent to:

var elements = document.querySelectorAll('input, button, textarea, select');

elements will be a static collection of the matched elements. A similar array could be built using getElementsByTagName using each different tag name.

.serializeArray creates an array of ojbects like:

[{name: value},{name:value},...];    

To serialise elements, follow the algorithm in the HTML5 Spec §4.10.22 Form submission. Note that jQuery does not submit the submit button (which is counter to the W3C specification and browser behaviour), you may wish to emulate that (or not).

There is a good link in SajithNair's comment, it's not perfect but is a pretty good start (say 98% of the way there).

The basic strategy is to loop over the members and deal with each different type, creating objects from successful controls (i.e. those that have a name and value and aren't disabled, and are checked for radio and checkbox inputs and selected for options in selects, remembering to deal with multiple selects) whose sole member is the element name with a value of the element value.

Where there are multiple controls with the same, there will be multiple objects with a same named property but likely different value (or not).

The code to do that is not difficult, but it is a bit long and tedious to write and test thoroughly. Have a go and ask for help when you get stuck.

Solution 3:

here is a fairly simple method that works for most forms:

[].slice.call(document.querySelectorAll('input[name]:not([disabled]), textarea[name]:not([disabled]), select[name]:not([disabled])')).reduce(function(a,b,i){
  var val= String({checkbox:1,radio:1}[b.type] ? b.checked : b.value).replace(/\r?\n/g, "\r\n");
  a[b.name]=  a[b.name] ?  a[b.name].concat(val) :val;
 return a;
}, {});

it doesn't handle named submits or image types like a real form, but those input's applicability are really only known at time of clicking, and thus don't make sense to a manual serializer. You can use a couple of onclicks to emulate the traditional functionality for image inputs and named submits if that's really a need for you, which it likely isn't...

this version uses a flat object of key:value pairs, or key:[value1,value2] arrays for repeats.