Подтвердить что ты не робот

Использование jQuery и JSON для заполнения форм?

Мне было интересно, как можно заполнить формы с помощью JSON?

У меня есть строка JSON, которую я получаю с помощью php json_encode() И я хочу использовать строку JSON для заполнения элементов управления формой (например, textarea или текстового ввода).

Как я могу достичь такой вещи без использования внешних плагинов (например, jQuery заполнять плагин, который я видел).

EDIT: формат JSON:

[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]

Это то, что я получаю от json_encode()

4b9b3361

ОТВЕТЫ

Ответ 1

Здесь проблема с textarea, затем я изменяю его на значение по default

Используйте это, чтобы назначить значения для многих элементов управления:

function populate(frm, data) {   
    $.each(data, function(key, value) {  
        var ctrl = $('[name='+key+']', frm);  
        switch(ctrl.prop("type")) { 
            case "radio": case "checkbox":   
                ctrl.each(function() {
                    if($(this).attr('value') == value) $(this).attr("checked",value);
                });   
                break;  
            default:
                ctrl.val(value); 
        }  
    });  
}

Ответ 2

Для простого управления текстом (т.е. без радио или флажков) вы можете создать простую версию функции заполнения:

function populate(frm, data) {
  $.each(data, function(key, value){
    $('[name='+key+']', frm).val(value);
  });
}

Пример использования:

populate('#MyForm', $.parseJSON(data));

Демо: http://jsfiddle.net/Guffa/65QB3/3/

Ответ 3

Спасибо Новшат. Это сработало для меня. Я добавил дополнительную проверку в вашу версию, чтобы иметь возможность заполнять выбранные опции.

function populateForm(frm, data) {   
$.each(data, function(key, value){  
    var $ctrl = $('[name='+key+']', frm); 
    if($ctrl.is('select')){
        $("option",$ctrl).each(function(){
            if (this.value==value) { this.selected=true; }
        });
    }
    else {
        switch($ctrl.attr("type"))  
        {  
            case "text" :   case "hidden":  case "textarea":  
                $ctrl.val(value);   
                break;   
            case "radio" : case "checkbox":   
                $ctrl.each(function(){
                   if($(this).attr('value') == value) {  $(this).attr("checked",value); } });   
                break;
        } 
    } 
});  


}; // end of populateForm() function

Ответ 4

С небольшими улучшениями (кроме переключателей):

function resetForm($form)
{
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}

function populateForm($form, data)
{
    resetForm($form);
    $.each(data, function(key, value) {
        var $ctrl = $form.find('[name='+key+']');
        if ($ctrl.is('select')){
            $('option', $ctrl).each(function() {
                if (this.value == value)
                    this.selected = true;
            });
        } else if ($ctrl.is('textarea')) {
            $ctrl.val(value);
        } else {
            switch($ctrl.attr("type")) {
                case "text":
                case "hidden":
                    $ctrl.val(value);   
                    break;
                case "checkbox":
                    if (value == '1')
                        $ctrl.prop('checked', true);
                    else
                        $ctrl.prop('checked', false);
                    break;
            } 
        }
    });
};

Ответ 5

В случае, если кто-то хочет заполнить многомерный json-формат, например, результат $.serializeJSON [https://github.com/marioizquierdo/jquery.serializeJSON], здесь функция для преобразования в плоский формат.

function json2html_name_list(json, result, parent){
    if(!result)result = {};
    if(!parent)parent = '';
    if((typeof json)!='object'){
        result[parent] = json;
    } else {
        for(var key in json){
            var value = json[key];
            if(parent=='')var subparent = key;
            else var subparent = parent+'['+key+']';
            result = json2html_name_list(value, result, subparent);
        }
    }
    return result;
}

Пример Usecase с приведенными выше функциями:

populateForm($form, json2html_name_list(json))

Со всеми приведенными выше примерами:

var $ctrl = $('[name='+key+']', frm);

необходимо изменить на

var $ctrl = $('[name="'+key+'"]', frm);

чтобы предотвратить синтаксическую ошибку с помощью jQuery

Для работы с этой функцией массивы списков заметок должны быть записаны с числами (например, фрукты [0], а не фрукты []).

Ответ 6

Это приложение к ответу @Nowshath

Это работает и для многоуровневых объектов.

 populateForm(form, data) {
    $.each(data, function(key, value) {

        if(value !== null && typeof value === 'object' ) {
            this.populateForm(form, value);
        }
        else {
            var ctrl = $('[name='+key+']', form);
            switch(ctrl.prop("type")) {
                case "radio": case "checkbox":
                ctrl.each(function() {
                    $(this).prop("checked",value);
                });
                break;
                default:
                    ctrl.val(value);
            }
        }
    }.bind(this));
}

Ответ 7

Это может стать довольно сложным. Лучше всего использовать инструмент для анализа вашего JSON. Вы можете легко создавать простые формы, но вам все равно нужно их проанализировать.

Проверьте этот плагин: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/

Или вы можете использовать ext4.

Ответ 8

Для странного, но действительного синтаксиса JSON, такого как

    [{'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>}]

посмотрите http://jsfiddle.net/saurshaz/z66XF/

У нас был этот странный синтаксис, используемый в нашем приложении, и мы обошли его, написав логику, как указано выше.

Ответ 9

Я обнаружил, что оригинальный script не играл красиво с именами массива [] из-за отсутствия кавычек в селекторе имен:

var $ctrl = $('[name="'+key+'"]', frm);

Ответ 10

У меня была та же проблема, и мы разработали версию, показанную выше, немного дальше. Теперь можно иметь отдельные флажки, которые возвращают значение, а также группы, которые возвращают массив имен. Кодирование проверено, используется и работает правильно.

        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<value.length; i++){
                                        singleVal = value[i];
                                        console.log("singleVal : " + singleVal + " value[i][1]" +  value[i][1] );
                                        if (singleVal === elemValue){elemValueInData = singleVal};
                                    }

                                    if(elemValueInData){
                                        //console.log("TRUE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', true);
                                        //$(this).prop('value', true);
                                    }
                                    else{
                                        //console.log("FALSE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', false);
                                        //$(this).prop('value', false);
                                    }
                                });
                            }
                            else if($ctrls.length == 1)
                            {
                                $ctrl = $ctrls;
                                if(value) {$ctrl.prop('checked', true);}
                                else {$ctrl.prop('checked', false);}

                            }
                            break;
                    }  //switch input type
                }
            }) // all json fields
        }  // populate form