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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
8
0
10 294
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Если ваши элементы формы имеют свой идентификатор, равный имени поля:

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

Это швы, чтобы пропустить флажки. Он не проверяет их, а изменяет определенное для них значение.

Pentium10 15.06.2011 00:27

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

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

Хороший ответ, но он не подберет поля выбора или текстовые поля. Возможно, измените "input [name = ...]" на "* [name = ...]"? Кроме того, я только что исправил синтаксическую ошибку в вашем коде.

nickf 06.10.2008 08:04

Я не уверен, что '*' сработает, и это может быть несколько интенсивно, если это так. Вы можете добавить другие параметры, разделенные запятыми - $ ("input [name ...], select [name ...], textarea [name ...]). Val ...

Eran Galperin 06.10.2008 22:48

Вы можете сделать $ (": input [name = ..."), и он должен выбрать выделенные области и текстовые области (обратите внимание на двоеточие).

Jacob Mattison 12.01.2009 22:47
Ответ принят как подходящий

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


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, иначе элементы select не будут обновлены.

взгляните на функцию val (). Я полагаю, он решает все эти дела за вас.

nickf 06.10.2008 08:03

Работает нормально, но действительно функция val () заботится о select и других типах, поэтому вам не нужно использовать переключатель, во всех случаях достаточно простого jQuery (this) .val (value).

gaborous 20.11.2014 02:00

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

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

Вот функция, которая обрабатывает перенос массива, фильтрацию кнопок, а также ограничивает выбор ввода заданным элементом формы. Параметр формы не является обязательным. Если не указано значение / 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 );
    } );
};

Другие вопросы по теме