Using jQuery and JSON to populate forms?

Question

I was wondering how is it popssible to populate forms using JSON?

I have a JSON string which I get using php\'s json_encode() And I want to use the JSON

Answer 1

I had the same problem and have developed the version shown above a little further. Now it is possible to have individual checkboxes that return the value as well as groups that returns an array of names. The coding is tested, used and working correctly.

        function populateForm($form, data)
        {
            //console.log("PopulateForm, All form data: " + JSON.stringify(data));

            $.each(data, function(key, value)   // all json fields ordered by name
            {
                //console.log("Data Element: " + key + " value: " + value );
                var $ctrls = $form.find('[name='+key+']');  //all form elements for a name. Multiple checkboxes can have the same name, but different values

                //console.log("Number found elements: " + $ctrls.length );

                if ($ctrls.is('select')) //special form types
                {
                    $('option', $ctrls).each(function() {
                        if (this.value == value)
                            this.selected = true;
                    });
                } 
                else if ($ctrls.is('textarea')) 
                {
                    $ctrls.val(value);
                } 
                else 
                {
                    switch($ctrls.attr("type"))   //input type
                    {
                        case "text":
                        case "hidden":
                            $ctrls.val(value);   
                            break;
                        case "radio":
                            if ($ctrls.length >= 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index)
                                {  // every individual element
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = singleVal = value;
                                    if(elemValue===value){
                                        $(this).prop('checked', true);
                                    }
                                    else{
                                        $(this).prop('checked', false);
                                    }
                                });
                            }
                            break;
                        case "checkbox":
                            if ($ctrls.length > 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index) // every individual element
                                {  
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = undefined;
                                    var singleVal;
                                    for (var i=0; i