Używanie jQuery i JSON do wypełniania formularzy?

Question

Zastanawiam się, jak to jest możliwe do wypełnienia formularzy za pomocą JSON?

Mam ciąg JSON, który otrzymuję przy użyciu php: json_encode() I chcę użyć ciągu JSON do wypełnienia formantów formularza (takich jak textarea lub wprowadzania tekstu).

Jak mogę osiągnąć takie rzeczy bez korzystania z zewnętrznych wtyczek (jak jQuery wypełni plugin, który widziałem).

EDIT: Format JSON:

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

To, co dostaję od json_encode()

Answer 1

istnieje tu problem z pola tekstowego, a następnie zmienić go na wartość domyślną przełącznika

Służy do przypisywania wartości do wielu funkcji sterujących:

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); 
     } 
    }); 
} 

Answer 2

Za jedyne kontroli tekstowych (czyli nie ma radia lub pola wyboru), można dokonać prostego wersję wypełnić funkcja:

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

Przykład zastosowania:

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

Demo: http://jsfiddle.net/Guffa/65QB3/3/

Answer 3

Może to być dość skomplikowane. Najlepiej użyć narzędzia do analizowania pliku JSON. Możesz łatwo tworzyć proste formularze, ale nadal musisz je parsować.

Sprawdź ten plugin się zamiast: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/

Albo można użyć ext4.

Answer 4

Dla dziwne ale poprawnej składni JSON jak

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

spojrzenie na tej http://jsfiddle.net/saurshaz/z66XF/

W tej aplikacji używaliśmy tej dziwnej składni, a zrozumieliśmy ją, pisząc powyższą logikę.

Answer 5

Dzięki Nowshath. To zadziałało dla mnie. Dodałem dodatkowy czek w twojej wersji, aby móc wypełnić również wybrane opcje.

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; 
     } 
    } 
}); 

};

Answer 6

Z drobnych usprawnień (z wyjątkiem przycisków radiowych):

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; 
      } 
     } 
    }); 
}; 

Answer 7

znalazłem oryginalny scenariusz nie grać ładny z tablicy [] nazwy z powodu braku ofert w selektorze nazwa:

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

Answer 8

Jeśli ktoś chce zapełnić wielowymiarowy format json, taki jak wynik $ .serializeJSON [https://github.com/marioizquierdo/jquery.serializeJSON], oto funkcja konwersji na format płaski.

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 przykład z funkcjami powyżej:

populateForm($form, json2html_name_list(json)) 

Z wszystkich powyższych przykładach choć:

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

musi zostać zmieniona na

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

aby zapobiec błąd składni w jQuery

Sporządź tablice z listą notatek z liczbami (np. owoc [0], zamiast owoców []), aby móc pracować z tą funkcją.

Answer 9

Miałem ten sam problem i opracowałem wersję pokazaną powyżej nieco dalej. Teraz możliwe jest posiadanie indywidualnych pól wyboru, które zwracają wartość, oraz grup zwracających tablicę nazw. Kodowanie jest testowane, używane i działa poprawnie.

 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 

Answer 10

To apendix do użytkownika @ Nowshath odpowiedź

Działa to dla wielopoziomowych obiektów oraz

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)); 
}