Remplir un formulaire avec des données d'un tableau associatif avec jQuery

Question

Dernière fois I asked about the reverse process, et obtenu des réponses très efficaces. Je vise les moindres lignes de code ici. J'ai une forme de champs et un tableau associatif dans le format {fieldname: data}, je veux remplir un formulaire correspondant avec celui-ci.

Answer 1

Quand je l'ai fait pour une projet, j'ai trouvé que la définition de la valeur des champs de sélection, boutons radio et cases à cocher nécessitait un code plus complexe, quelque chose du genre:

jQuery.each(data, function (name,value) { 
    jQuery("input[name='"+name+"'],select[name='"+name+"']").each(function() { 
    switch (this.nodeName.toLowerCase()) { 
     case "input": 
      switch (this.type) { 
       case "radio": 
       case "checkbox": 
        if (this.value==value) { jQuery(this).click(); } 
        break; 
       default: 
        jQuery(this).val(value); 
        break; 
      } 
      break; 
     case "select": 
      jQuery("option",this).each(function(){ 
       if (this.value==value) { this.selected=true; } 
      }); 
      break; 
    } 
    }); 
}); 

Je n'ai pas testé ce code donc j'espère qu'il n'y a pas d'erreurs de syntaxe stupide que j'aurais dû attraper. J'espère que cela t'aides.

Je ne suis pas autorisé à commenter les commentaires ici (pour le moment), donc .... Comme indiqué dans le commentaire, la méthode jQuery .val (val) gère la configuration des cases d'option, des cases à cocher et des sélections.

Vous devrez toujours sélectionner [nom = ...] dans votre modèle de sélecteur jQuery ou les éléments sélectionnés ne seront pas mis à jour.

Answer 2

Si vos éléments de formulaire ont leur carte d'identité mis à la nomchamp:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); }); 

Answer 3

ou similaire à la suggestion précédente en utilisant les noms de champs au lieu de ids:

$.each(data, function(name,value) { 
    $("input[name='" + name + "']").val(value); 
}); 

Answer 4

Je n'ai pas vu le handle jQuery passer une seule valeur (non-array) dans val() pour une entrée de radio ou checkbox. Vous devez être sûr d'envelopper la valeur unique dans un tableau.

Je n'ai généralement pas voulu modifier les valeurs des entrées bouton-ish, donc je les filtre.

Voici une fonction qui gère l'habillage du tableau, le filtrage des boutons et qui limite également la sélection d'entrée à un élément de formulaire donné. Le paramètre de formulaire est facultatif. Si elle est désactivée/null/indéfinie, toutes les entrées de la page seront sélectionnées.

function populateForm(data, form) { 
    $.each(data, function(name, value) { 
     var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form); 
     input.val((!$.isArray(value) && (input.is(':checkbox') || input.is(':radio'))) ? [ value ] : value); 
    }); 
};