<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Получение данных из HTML формы используя цикл for..of

Получение данных из HTML формы используя цикл for..of

Самый простой и понятный для начинающих способ получения данных из формы, скорее всего окажется не слишком эффективным. Давайте вернемся к предыдущему уроку, где мы разбирали один из способов извлечения данных.

Взгляните на JavaScript код, я его продублирую здесь. Мы начали с поиска всех полей формы по их селекторам, методично перечисляя их названия и записывая в переменные. Но что не так с этим кодом? Данный код отлично сработает здесь и сейчас, под конкретную задачу.

const form = document.getElementById('form');

function getFormValue(event) {
    event.preventDefault();
    // поиск полей формы по селекторам
    const name = form.querySelector('[name="name"]'),
        age = form.querySelector('[name="age"]'),
        terms = form.querySelector('[name="terms"]'),
        plan = form.querySelector('[name="plan"]');

    const values = {
        name: name.value,
        age: age.value,
        plan: plan.value,
        terms: terms.checked
    };

    console.log(values);
}

form.addEventListener('submit', getFormValue);

Представьте, что заказчик получил данный код от программиста для получения данных из формы перед отправкой на сервер и разместил на своем сайте. Клиенты оставляют заявки на сайте, заполняя форму. Но заказчик не все учел сразу и решает, что неплохо было бы получить от клиента email. Он самостоятельно добавляет в HTML-код дополнительное поле для email. Многие владельцы сайтов или их админы имеют кое-какое предсталение о HTML и CSS, но вот понимание JavaScript требует систематического подхода и более глубокого погружения в тему. Добавил он дополнительное поле в HTML-код и на этом все.

<div>
    <label>
        Email:
        <input type="email" name="email" value="email">
    </label>
</div>

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

...
email = form.querySelector('[name="email"]'),

const data = {
    name: email.value,
    ...
};

Универсальный способ получения данных из формы

Есть способ, как получать данные из формы, независимо от получения идентификаторов, классов или селекторов полей формы. С помощью цикла for..of, мы переберем все поля формы. Создадим пустой объект data, куда будут записываться найденные значения полей.

const data = {};

Получим имена из полей формы, найденные в цикле. Сделаем проверку, если у поля есть атрибут name, тогда мы извлечем из него данные и запишем их в объект по ключу name.

for (let field of form) {
    const {name} = field;

    if (name) {
        const {type, checked, value} = field;

         data[name] = isCheckboxOrRadio(type) ? checked : value;
    }
}

Затем проверим есть ли у нас тип полей checkbox или radio, чтобы JavaScript возвращал true или false. Напишем функцию isCheckboxOrRadio, которая определит, является ли поле чекбоксом или радиокнопкой. Если галочка стоит, то вернется значение true, в противном случае функция вернет false.

const isCheckboxOrRadio = type => ['checkbox', 'radio'].includes(type);

Если тип поля checkbox, то в качестве значения возьмем checked, иначе в объект с данными попадет value.

data[name] = isCheckboxOrRadio(type) ? checked : value;

Весь JavaScript код:

const isCheckboxOrRadio = type => ['checkbox', 'radio'].includes(type);

const {form} = document.forms;

function getFormValue(event) {
    event.preventDefault();

    const data = {};

    for (let field of form) {
        const {name} = field;

        if (name) {
            const {type, checked, value} = field;

            data[name] = isCheckboxOrRadio(type) ? checked : value;
        }
    }

    console.log(data);
}

form.addEventListener('submit', getFormValue);

Теперь выведем результат в консоль.



Получение данных из HTML формы используя цикл for..of.

При способе получения данных через цикл, заказчику не нужно править JavaScript код. Циклу for..of все равно какие поля у формы есть и какие ещё будут.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.