Заполняют форму с данными из ассоциативного массива с jQuery

Question

Последний раз I asked about the reverse process и получили очень эффективные ответы. Я нацелен на наименьшие строки кода здесь. У меня есть форма полей и ассоциативный массив в формате {fieldname: data}, я хочу заполнить с ним соответствующую форму.

Answer 1

Когда я сделал это для проекта, я установил, что для установки значения полей выбора, переключателей и флажков потребовался более сложный код, что-то вроде строк:

jQuery.each(data, function (name,value) { 
    jQuery("input[name='"+name+"'],select[name='"+name+"']").each(function() { 
    switch (this.nodeName.toLowerCase()) { 
     case "input": 
      switch (this.type) { 
       case "radio": 
       case "checkbox": 
        if (this.value==value) { jQuery(this).click(); } 
        break; 
       default: 
        jQuery(this).val(value); 
        break; 
      } 
      break; 
     case "select": 
      jQuery("option",this).each(function(){ 
       if (this.value==value) { this.selected=true; } 
      }); 
      break; 
    } 
    }); 
}); 

Я не тестировал этот код, поэтому надеюсь, что нет глупых синтаксических ошибок, которые я должен был поймать. Надеюсь это поможет.

Мне не позволено комментировать комментарии здесь (пока), поэтому .... Как отмечено в комментарии, метод jQuery .val (val) обрабатывает установку переключателей, флажки и выделения.

Вам все равно нужно поместить select [name = ...] в шаблон селектора jQuery или элементы выбора не будут обновляться.

Answer 2

Если ваши формы элементы их ID устанавливается в имя_поля:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); }); 

Answer 3

Или аналогично предыдущему предложению, используя имена полей вместо идентификаторов:

$.each(data, function(name,value) { 
    $("input[name='" + name + "']").val(value); 
}); 

Answer 4

Я не видел, чтобы дескриптор jQuery передавал одно значение (без массива) в val() для радио или ввода флажка. Вы должны обязательно обернуть одно значение в массив.

Я также, как правило, не хотел изменять значения кнопочных входов, поэтому я отфильтровываю их.

Вот функция, которая обрабатывает обработку массива, фильтрацию кнопок, а также ограничивает выбор ввода для данного элемента формы. Параметр формы является необязательным. Если значение left/null/undefined, то будут выбраны все входы на странице.

function populateForm(data, form) { 
    $.each(data, function(name, value) { 
     var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form); 
     input.val((!$.isArray(value) && (input.is(':checkbox') || input.is(':radio'))) ? [ value ] : value); 
    }); 
};