jquery plugin to convert form input to a javascript object graph

29Oct08

Client side javascript validation often ends up being  ugly and really boring ..while on the serverside validations usually tend to be more domain related ,something like “order.Qty > 0″ on the serverside endsup looking something ugly like “document.get(…….).val()….”

I ended up writing a jquery plugin which reads the form inputs and converts it into an object graph based on the name attribute, so for an form with the following  inputs

<input  name="order.customerName"  />
<input  name="order.orderItem.qty"  />

you could just say

 var order = $('#myform').params2Object();
 test(order.customerName ==='john');
 test(order.orderItem.qty > 0 );

Here is the actual plugin code ..HTH

jQuery.fn.params2Object = function(){
    var d = this.serializeArray()
    var data = {};
    for (var i = 0; i < d.length; i++) {
        var tokens = d[i].name.split('.');
        _setValue(data, tokens, d[i].value);
    }
    return data;

    function _setValue(obj, tokens, value, index){
        if (tokens.length == 1) {
            if (typeof index != 'undefined') {
                obj[index] = obj[index] ||
                {};
                obj[index][tokens[0]] = value;
            }
            else {
                obj[tokens[0]] = value;
            }
        }
        else {
            var prop = _getProperty(tokens[0]);
            obj[prop.name] = obj[prop.name] || (prop.isArray ? [] : {});
            _setValue(obj[prop.name], tokens.slice(1, tokens.length), value, prop.index);
        }
    }

    function _getProperty(token){
        var arraySplit = token.split('[');
        if (arraySplit.length > 1) {
            var propName = arraySplit[0];
            var index = arraySplit[1].split(']')[0];
        }
        else {
            var propName = token;
        }
        return {
            name: propName,
            index: index,
            isArray: token.indexOf(']') > 0
        };

    }

};

About these ads

Filed under: Uncategorized   |  3 Comments
Tags: jquery