Utilisation de jQuery et JSON pour remplir des formulaires?
Je me demandais comment il est possible de peupler des formulaires à l'aide de JSON.
J'ai une chaîne JSON que je reçois en utilisant json_encode().__ de php. Et je veux utiliser la chaîne JSON pour remplir les contrôles de formulaire (tels que textarea ou saisie de texte).
Comment puis-je obtenir une telle chose sans utiliser de plugins externes (comme le plugin jQuery Populate, que j'ai vu).
EDIT: format JSON:
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
C'est ce que je reçois de json_encode ()
Il y a un problème ici avec textarea, alors je le change en une valeur de commutateur default
Utilisez cette option pour attribuer des valeurs à de nombreux contrôles:
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);
}
});
}
Pour les contrôles de texte seulement (c'est-à-dire sans radios ni cases à cocher), vous pouvez créer une version simple d'une fonction de remplissage
function populate(frm, data) {
$.each(data, function(key, value){
$('[name='+key+']', frm).val(value);
});
}
Exemple d'utilisation:
populate('#MyForm', $.parseJSON(data));
Merci Nowshath. Cela a fonctionné pour moi. J'ai ajouté une vérification supplémentaire dans votre version pour pouvoir également renseigner des options de sélection.
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;
}
}
});
}; // end of populateForm() function
Avec de petites améliorations (sauf les boutons radio):
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;
}
}
});
};
Ceci est une annexe de la réponse de @Nowshath
Cela fonctionne aussi bien pour les objets multiniveaux
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));
}
Si vous souhaitez remplir un format json multidimensionnel, tel que le résultat de $ .serializeJSON [ https://github.com/marioizquierdo/jquery.serializeJSON ], voici une fonction pour convertir en format .
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;
}
Exemple d'utilisation avec les fonctions ci-dessus:
populateForm($form, json2html_name_list(json))
Avec tous les exemples ci-dessus cependant:
var $ctrl = $('[name='+key+']', frm);
doit être changé pour
var $ctrl = $('[name="'+key+'"]', frm);
empêcher une erreur de syntaxe avec jQuery
Notez que les tableaux de listes de notes doivent être écrits avec des nombres (par exemple, fruit [0], au lieu de fruit []) pour pouvoir fonctionner avec cette fonction.
Pour une syntaxe JSON étrange mais valide, telle que
[{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>}]
regarde ceci http://jsfiddle.net/saurshaz/z66XF/
Nous avions cette syntaxe étrange utilisée dans notre application et nous avons pu contourner en écrivant la logique ci-dessus.
Cela peut être assez compliqué. Il est préférable d'utiliser un outil pour analyser votre JSON. Vous pouvez créer assez facilement des formulaires simples, mais vous devez quand même les analyser.
Vérifiez ce plugin à la place: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
Ou vous pouvez utiliser ext4.
J'ai trouvé que le script original ne jouait pas à Nice avec les noms de tableau [] à cause de guillemets manquants dans le sélecteur de nom:
var $ctrl = $('[name="'+key+'"]', frm);
J'ai eu le même problème et ai développé la version montrée ci-dessus un peu plus loin. Maintenant, il est possible d'avoir des cases à cocher individuelles qui renvoient la valeur ainsi que des groupes qui renvoient un tableau de noms ... Le codage est testé, utilisé et fonctionne correctement.
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