Back jQuery

fillthis.jquery.js: a Generic form filler plugin

WRITTEN BY ON 10 Apr 2012
10,390 VIEWS • SHARES
1 comment

This plugin allows you to fill-up any form elements with a simple line of code You can pass all the fields value at once with a JSON object (check examples below) it's very useful if, for example you want to dynamically pre-fill your form from a server side scripts.

JS - jQuery

More information here: http://bulma171.github.com/fillthis.jquery.js/

(function( $ ){
    $.fillthis = $.fn.fillthis = function( inputValue ) {

        try {
            json = $.parseJSON(inputValue);
            jQuery.each(inputValue, function(fieldId, value) {

                try { // try if we can select by id
                    var inputType = $("#"+fieldId)[0].type;
                }
                catch(e) { // if not, then it must be a name value for radio button
                    var inputType = $("input[name="+fieldId+"]")[0].type;
                }

                if(inputType=='text' || inputType=='textarea' || inputType=='hidden' || inputType=='password' || inputType=='select-one') {
                    $("#"+fieldId).val(value);
                }
                else if(inputType=='select-multiple') {
                    var arrayMultipleValues = value.split(';');
                    $("#"+fieldId).val(arrayMultipleValues);
                }
                else if(inputType=='checkbox') {
                    if(inputValue!='' && value!="0") {
                        $("#"+fieldId).attr('checked',true);
                    }
                    else if(value=="" || value=="0") {
                        $("#"+fieldId).attr('checked',false);
                    }
                }
                else if(inputType=='radio') {
                    $("input[name="+fieldId+"]").filter("[value="+value+"]").prop("checked",true);
                }
                else {
                    $.error('This element type is not an input element.');
                }
            });

        } catch (e) {
            // alert(e);
            if($(this).length) {
                var inputType = this[0].type;

                if(inputType=='text' || inputType=='textarea' || inputType=='hidden' || inputType=='password' || inputType=='select-one') {
                    $(this).val(inputValue);
                }
                else if(inputType=='select-multiple') {
                    var arrayMultipleValues = inputValue.split(';');
                    $(this).val(arrayMultipleValues);
                }
                else if(inputType=='checkbox') {
                    if(inputValue!='' && inputValue!="0") {
                        $(this).attr('checked',true);
                    }
                    else if(inputValue=="" || inputValue=="0") {
                        $(this).attr('checked',false);
                    }
                }
                else if(inputType=='radio') {
                    $(this).filter("[value="+inputValue+"]").prop("checked",true);
                }
                else {
                    $.error('This element type is not an input element.');
                }
            }
            else {
                $.error('Object does not exist!');
            }
        }
    };
})( jQuery );
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

1 comment
Pritesh Desai 12 years ago
how about a demo page?
Reply