Utiliser jQuery et JSON pour peupler les formes?
je me demandais comment il est possible de remplir des formulaires à L'aide de JSON?
j'ai une chaîne JSON que j'obtiens en utilisant php's json_encode()
Et je veux utiliser la chaîne JSON pour remplir les contrôles de forme (comme textarea ou text input).
Comment puis-je réaliser une telle chose sans utiliser de plugins externes (comme le plugin jQuery populate, que j'ai vu).
EDIT: JSON format:
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
10 réponses
il y a un problème ici avec textarea, alors je le change en valeur par défaut
Utilisez ceci pour assigner 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 commandes texte (c'est-à-dire pas de radios ou de cases à cocher), vous pouvez faire une version simple d'une fonction populate:
function populate(frm, data) {
$.each(data, function(key, value){
$('[name='+key+']', frm).val(value);
});
}
exemple d'Utilisation:
populate('#MyForm', $.parseJSON(data));
Merci Nowshath. Il a travaillé pour moi. J'ai ajouté un supplément de vérifier dans votre version pour être en mesure de remplir sélectionnez options.
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 (à l'exception des 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;
}
}
});
};
dans le cas où quelqu'un cherche à peupler à partir d'un format JSON multidimensionnel, tel que le résultat de $.serializeJSON [ https://github.com/marioizquierdo/jquery.serializeJSON], Voici une fonction pour passer à un format plat.
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;
}
cas d'utilisation exemple avec les fonctions ci-dessus:
populateForm($form, json2html_name_list(json))
Avec tous les exemples ci-dessus:
var $ctrl = $('[name='+key+']', frm);
doit être remplacé par
var $ctrl = $('[name="'+key+'"]', frm);
pour prévenir une erreur de syntaxe avec jQuery
notez que les tableaux de liste doivent être écrits avec des nombres (par exemple, fruit[0], au lieu de fruit[]) afin de fonctionner avec cette fonction.
C'est un appendice à @Nowshath réponse
cela fonctionne aussi bien pour les objets à plusieurs niveaux
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));
}
cela peut devenir assez compliqué. Il est préférable d'utiliser un outil pour analyser votre JSON. Vous pouvez créer des formes simples assez facilement, mais vous devez encore le parser.
Vérifier ce plugin, au lieu: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
Ou vous pouvez utiliser ext4.
pour une syntaxe JSON bizarre mais valide comme
[{'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 ce http://jsfiddle.net/saurshaz/z66XF/
nous avions cette syntaxe étrange utilisée dans notre application et nous nous en sommes sortis en écrivant la logique comme ci-dessus.
j'ai trouvé que le script original n'a pas été agréable avec les noms de tableaux [] à cause de citations manquantes dans le sélecteur de noms:
var $ctrl = $('[name="'+key+'"]', frm);
j'ai eu le même problème et j'ai développé la version ci-dessus un peu plus loin. Maintenant, il est possible d'avoir des cases individuelles qui renvoie la valeur ainsi que des groupes qui renvoie 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