views:

511

answers:

4

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

<form id='myform'>
   <input type='text' name='field1' value='foo'>
   <input type='text' name='field2' value='bar'>
</form>

would convert to a javascript object...

{
   field1: 'foo',
   field2: 'bar'
}
A: 

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

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

Luca Matteis
oh wow. _sucks_ is a bit strong, considering writing such a tool is a matter of what, 2 min? reverting to a longer vanilla solution instead is what you _shouldn't_ do, if it can be helped.
Dimitar Christoff
A: 

One way of doing it. -- Converting it to JSON object

var hm = $('myform').toQueryString();
    hm = '{"'+hm+'"}'; 
    hm = hm.replace(/&/g, '","');
    hm = hm.replace(/=/g, '":"');
    var jsn = JSON.decode(hm); // jsn is ur JSON object.




Convert it to Hash.

Mootools has an object type called Hash. You can convert to that as well by doing the following.

Hash link : http://mootools.net/docs/core/Native/Hash It has set and get methods and you can loop and do stuff, check the link.

var hm = $('myform').toQueryString();

var ar = hm.split('&');
var finalo = new Hash();
ar.each(function(a, aCounter)
{
    var tmp = a.split('=');
    finalo.set(tmp[0], tmp[1]);
});

// finalo is your Hash object. Use the get() method to extract values. Check the link given above.
Zaje
+2  A: 

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.

Dimitar Christoff
A: 

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

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

Max