How To Convert Form Data To Object Using Mootools

Question

I would like to convert an entire form of data to a javascript object.

Solution 1:

In MooTools you can do easy trick how to convert all forms values into the Object:

var formObjects=$('myform').toQueryString().parseQueryString();

Convert to JSON:

var formJson=JSON.encode(formObjects);

Solution 2:

just write your own method, basing it upon the source of the Element.toQueryString - something like this (and i know the method name is rubbish but thats the least of your worries)

Element.implement({
    toJSON: function(){
        var json = {};
        this.getElements('input, select, textarea', true).each(function(el){
            if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file') return;
            var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
                return opt.value;
            }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
            $splat(value).each(function(val){
                if (typeof val != 'undefined') {
                    json[el.name] = val;
                }
            });
        });
        return json;
    }
});

console.log($("myform").toJSON());

tested and working fine with the example form - http://mootools.net/shell/ZSsVr/ - produces the exact result you have asked for.

Solution 3:

I actually like a combination of Dimitar Christoff answer and Trebla:

Element.implement({
    toJSON: function(){
        var j = {};
        Array.each(this.toQueryString().split('&'),function(a){
            var kv = a.split('=')
            j[kv[0]] = kv[1]||'';
        });
        returnJSON.encode(j);
    }
});
console.log($('formular_support').toJSON());

Solution 4:

http://code.google.com/p/form2js/

check this out, exactly what you're need, but framework independent

Solution 5:

MooTools doesn't come with a form serialization tool; i know, that sucks.

However, I've successfully used this stand-alone implementation: form2obj.

JavaScript Creator