web-dev-qa-db-fra.com

Utilisez jQuery pour remplir à nouveau le formulaire avec des données JSON

J'ai un formulaire HTML que je sauvegarde dans la base de données via ajax. Pour obtenir la chaîne de requête des paires clé/valeur, j'ai utilisé la fonction très pratique serialize, comme ceci:

var myData = $("form#form_id").serialize();
$.ajax({
    url: "my_save_script.php",
    type: "post",
    data: myData,
    success: function(msg){
        alert(msg);
    }
});

Maintenant, je veux charger un formulaire vierge et le remplir à nouveau avec les données de la base de données, qui sont fournies à partir d'un appel ajax sous forme de chaîne JSON. J'ai pu obtenir un objet Javascript avec les bonnes paires clé/valeur, comme ceci:

data = $.parseJSON(data);
data = data[0];

Quel est le moyen le plus simple et le plus élégant de re-peupler le formulaire? 

gardez à l'esprit les éléments d'entrée du formulaire sont texte, sélection, case à cocher et radio. Les noms des éléments d'entrée sont les mêmes que ceux des colonnes de la base de données et constituent les clés des paires clé/valeur de l'objet data ci-dessus. C'est pourquoi la fonction serialize fonctionne si bien pour moi

javascriptjqueryjsonformspopulate
21
jeffery_the_wind

Je dirais que le moyen le plus simple serait quelque chose dans ce sens:

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

Fondamentalement, les seuls qui sont impairs sont les cases à cocher et les radios car ils doivent avoir leur propriété vérifiée, eh bien, vérifié. Les radios sont un peu plus complexes que les cases à cocher car non seulement nous devons les vérifier, nous devons trouver le bon ONE pour vérifier (en utilisant la valeur). Pour tous les autres éléments (entrées, zones de texte, zones de sélection, etc.), sa valeur doit simplement être définie sur celle renvoyée dans l'objet JSON.

jsfiddle: http://jsfiddle.net/2xdkt/

52
Bryan B.

Si data [0] contient le nom du champ et que data [1] contient la valeur, vous pouvez procéder comme suit:

Vous pouvez faire quelque chose comme ceci pour les zones de texte:

$("[name="+data[0]+"]").val(data[1]);

Ensuite, quelque chose comme ceci pour sélectionne:

$("[name="+data[0]+"]").val(data[1]);

Veuillez noter que les cases à cocher et les boutons radio ne sont sérialisés que s'ils sont cochés. 

Donc, quelque chose comme ceci pour les cases à cocher (avant jQuery 1.6+):

$("[name="+data[0]+"]").attr('checked','checked');

Le bouton radio peut nécessiter du travail supplémentaire en fonction de la façon dont vous différenciez les différents. (ID I.E, valeur, etc.)

0
evasilchenko