Использование jQuery и JSON для заполнения форм?
Мне было интересно, как можно заполнить формы с помощью JSON?
У меня есть строка JSON, которую я получаю с помощью php json_encode()
И я хочу использовать строку JSON для заполнения элементов управления формой (например, textarea или текстового ввода).
Как я могу достичь такой вещи без использования внешних плагинов (например, jQuery заполнять плагин, который я видел).
EDIT: формат JSON:
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
Это то, что я получаю от json_encode()
Ответы
Ответ 1
Здесь проблема с textarea, затем я изменяю его на значение по default
Используйте это, чтобы назначить значения для многих элементов управления:
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);
}
});
}
Ответ 2
Для простого управления текстом (т.е. без радио или флажков) вы можете создать простую версию функции заполнения:
function populate(frm, data) {
$.each(data, function(key, value){
$('[name='+key+']', frm).val(value);
});
}
Пример использования:
populate('#MyForm', $.parseJSON(data));
Демо: http://jsfiddle.net/Guffa/65QB3/3/
Ответ 3
Спасибо Новшат. Это сработало для меня. Я добавил дополнительную проверку в вашу версию, чтобы иметь возможность заполнять выбранные опции.
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
Ответ 4
С небольшими улучшениями (кроме переключателей):
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;
}
}
});
};
Ответ 5
В случае, если кто-то хочет заполнить многомерный 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
Для работы с этой функцией массивы списков заметок должны быть записаны с числами (например, фрукты [0], а не фрукты []).
Ответ 6
Это приложение к ответу @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));
}
Ответ 7
Это может стать довольно сложным. Лучше всего использовать инструмент для анализа вашего JSON. Вы можете легко создавать простые формы, но вам все равно нужно их проанализировать.
Проверьте этот плагин:
http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
Или вы можете использовать ext4.
Ответ 8
Для странного, но действительного синтаксиса 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/
У нас был этот странный синтаксис, используемый в нашем приложении, и мы обошли его, написав логику, как указано выше.
Ответ 9
Я обнаружил, что оригинальный script не играл красиво с именами массива [] из-за отсутствия кавычек в селекторе имен:
var $ctrl = $('[name="'+key+'"]', frm);
Ответ 10
У меня была та же проблема, и мы разработали версию, показанную выше, немного дальше. Теперь можно иметь отдельные флажки, которые возвращают значение, а также группы, которые возвращают массив имен.
Кодирование проверено, используется и работает правильно.
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
