Использование jQuery и JSON для заполнения форм?
мне было интересно, как popssible заполнять формы с помощью JSON?
у меня есть строка JSON, которую я получаю с помощью php json_encode()
И я хочу использовать строку JSON для заполнения элементов управления формой (например, textarea или text input).
Как я могу достичь этого без использования внешних плагинов (например, jQuery populate plugin, который я видел).
EDIT: формат JSON:
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
это то, что я получаю от json_encode()
10 ответов
здесь есть проблема с textarea, затем я изменяю его на значение переключателя по умолчанию
используйте это, чтобы присвоить значения многим элементам управления:
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);
}
});
}
для текстовых элементов управления (т. е. без радио или флажков) вы можете сделать простую версию функции заполнения:
function populate(frm, data) {
$.each(data, function(key, value){
$('[name='+key+']', frm).val(value);
});
}
пример использования:
populate('#MyForm', $.parseJSON(data));
Спасибо Nowshath. У меня получилось. Я добавил дополнительную проверку в вашей версии, чтобы иметь возможность заполнять параметры выбора.
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
С небольшими улучшениями (кроме переключателей):
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;
}
}
});
};
в случае, если кто-то хочет заполнить из многомерного формата json, такого как результат $.serializeJSON [ https://github.com/marioizquierdo/jquery.serializeJSON ], вот функция для преобразования в плоский формат.
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;
}
пример Usecase с функциями выше:
populateForm($form, json2html_name_list(json))
со всеми примерами выше, хотя:
var $ctrl = $('[name='+key+']', frm);
необходимо изменить на
var $ctrl = $('[name="'+key+'"]', frm);
для предотвращения синтаксической ошибки с помощью в jQuery
обратите внимание, что массивы списков должны быть записаны с числами (например, fruit[0], а не fruit []), чтобы работать с этой функцией.
Это апендикс к ответу @Nowshath
это работает и для многоуровневых объектов
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));
}
Это может стать довольно сложным. Лучше всего использовать инструмент для анализа вашего JSON. Вы можете создавать простые формы довольно легко, но вам все равно нужно разобрать его.
вместо этого проверьте этот плагин: http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
или вы можете использовать ext4.
для странного, но допустимого синтаксиса JSON, такого как
[{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>}]
посмотрите на это http://jsfiddle.net/saurshaz/z66XF/
У нас был этот странный синтаксис, используемый в нашем приложении, и мы обошли, написав логику, как указано выше.
Я обнаружил, что исходный скрипт не играл хорошо с именами array[] из-за отсутствующих кавычек в селекторе имен:
var $ctrl = $('[name="'+key+'"]', frm);
У меня была та же проблема, и я разработал версию, показанную выше немного дальше. Теперь можно установить отдельные флажки, возвращающие значение, а также группы, возвращающие массив имен. Кодирование тестируется, используется и работает правильно.
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