2009-03-11 6 views
6

Je sais qu'il y a une façon beaucoup plus élégante/efficace de le faire (en php j'utiliser foreach) mais avec jQuery comment je peux marcher les paires var/val d'une réponse JSON et remplir les champs de formulaire avec les mêmes id noms de champs dans la réponse JSON?"Marcher" réponse JSON et remplir les champs de formulaire - approche plus efficace?

Voici ma réponse JSON:

[{"field":"svendor_name","value":"Vendor Name Inc."},{"field":"svendor_addr1","value":"1234 Vendor Lane."},{"field":"svendor_addr2","value":"Suite 100"},{"field":"svendor_city" 
,"value":"Vendorville"},{"field":"svendor_state","value":"CA"},{"field":"svendor_zip","value":"90210"},{"field" 
:"svendor_phone","value":"800-555-1234"}] 

Voici mon code jQuery pour renseigner le formulaire:

$(document).ready(function() 
{ 
    $('#svendor_name').bind("change", function() 
    { 
     var svendor = $("#svendor_name").val(); 
     svendor = svendor.replace(/&/g, '*'); 
     $.getJSON("get_vendors.php?sname=" + svendor, 
     function(data) 
     { 
      $.each(data, 
       function(i, item) 
       { 
        if(item.field == "svendor_name") 
        { 
         $("#svendor_name").val(item.value); 
        } 
        else if(item.field == "svendor_addr1") 
        { 
         $("#svendor_addr1").val(item.value); 
        } 
        else if(item.field == "svendor_addr2") 
        { 
         $("#svendor_addr2").val(item.value); 
        } 
        else if(item.field == "svendor_city") 
        { 
         $("#svendor_city").val(item.value); 
        } 
        else if(item.field == "svendor_state") 
        { 
         $("#svendor_state").val(item.value); 
        } 
        else if(item.field == "svendor_zip") 
        { 
         $("#svendor_zip").val(item.value); 
        } 
        else if(item.field == "svendor_phone") 
        { 
         $("#svendor_phone").val(item.value); 
        } 
        else if(item.field == "svendor_id") 
        { 
         $("#svendor_id").val(item.value); 
        } 
      }); 
     }); 
    }); 
}); 

Que tout fonctionne bien et bon, mais je veux vraiment éviter tout le si/else et utilisez simplement les données provenant de la méthode getJSON pour déterminer quels champs sont renseignés avec quelles valeurs. Qu'est-ce qu'une approche plus propre/plus efficace?

- Nicholas

Répondre

21

Vous pouvez vous débarrasser de tous les "si" des déclarations faites par le remplacement de votre .each de $ avec ceci:

$.each(data, function(i, item){ 
    $("#"+item.field).val(item.value); 
}); 
+0

de réponse excellent. Fonctionne parfaitement et est exactement ce que je cherchais. Je vous remercie. –

+8

Cela fonctionne bien tant que tous les champs sont des champs de saisie. Mais qu'en est-il des combos, des cases à cocher et des boutons radio? N'y a-t-il pas un bon plugin qui s'occupe de ça? – bart

+0

Je me demande la même chose que bart. –

7

Quel est le problème avec ça?

$.each(data, 
    function(i, item) { 
     $("#" + item.field).val(item.value); 
    } 
}); 
+1

Ne se comporte pas bien pour les cases à cocher et les boutons radio –

0

je remarquai que les ID d'éléments sont les mêmes que les champs dans votre JSON, que diriez-vous:

$(document).ready(function() { 
    $('#svendor_name').bind("change", function() 
    { 
     var svendor = $("#svendor_name").val(); 
     svendor = svendor.replace(/&/g, '*'); 
     $.getJSON("get_vendors.php?sname=" + svendor, 
     function(data) { 
       $.each(data, function(i, item) { 
        $('#' + item.field).val(item.value); 
       }); 
     }); 
    }); 
}); 
3

Si vos résultats ressemble à ceci:

[{"field1":"value1","field2":"value2"}] 

Ensuite, le code fourni par Travaux de Seb et de Chetan

$.each(data, function(i, item){ 
    $("#"+item.field).val(item.value); 
}); 

Si vos résultats ressemble à ceci:

{"field1":"value1","field2":"value2"} 

Ensuite, utilisez ce code

$.each(data, function(field, value){ 
    $("#"+field).val(value); 
}); 
+0

Trop bien pour une réponse sur les champs directs –

Questions connexes