Utiliser jquery pour re-remplir la forme avec les 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 de paires clé/valeur, j'ai utilisé le très pratique serialize fonction, 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 vide, et le remplir à nouveau avec les données de la base de données, qui est délivrée à partir d'un appel ajax comme une chaîne JSON. J'ai été capable d'obtenir un objet Javascript avec les bonnes paires clé/valeur comme ceci:
data = $.parseJSON(data);
data = data[0];
Quelle est la façon la plus simple, la plus élégante pour remplir à nouveau le formulaire?
gardez à l'esprit que les éléments d'entrée du formulaire sont le texte, la sélection, la case à cocher et la radio. Les noms des éléments d'entrée sont les mêmes que les noms des colonnes de base de données, et les clefs de l'paires clé/valeur dans le ci-dessus data objet. C'est pourquoi l' serialize fonctionne si bien pour moi
3 réponses
je dirais que la façon la plus facile serait quelque chose du genre:
// 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 bizarres sont les cases à cocher et les radios parce qu'ils ont besoin d'avoir leur propriété vérifiée, Eh bien, coché. Les radios sont un peu plus complexes que les cases à cocher car non seulement nous devons les vérifier, mais nous devons trouver la bonne à vérifier (en utilisant la valeur). Tout le reste (inputs, textareas, selectbox, etc.) devrait juste avoir sa valeur fixée à la un qui est retourné dans L'objet JSON.
jsfiddle:http://jsfiddle.net/2xdkt/
Si les données[0] contient le nom du champ et de données[1] contient la valeur, alors vous pouvez faire ce qui suit:
Vous pouvez faire quelque chose comme cela pour les zones de texte:
$("[name="+data[0]+"]").val(data[1]);
Alors quelque chose comme ceci pour les sélections:
$("[name="+data[0]+"]").val(data[1]);
veuillez noter que les cases à cocher et les boutons radio ne sont numéroté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 pourrait avoir besoin d'un travail supplémentaire en fonction de la façon dont vous différenciez entre les différents. (I. E. Id, valeur, etc..)
je suggère que vous changiez la façon dont vous faites une requête ajax. Utiliser. post ()
$.post("my_save_script.php", {
data: myData,
}, function(data) {
$.each(data, function(i, item){
$("#"+item.field).val(item.value);
});
},
"json");