<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на 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):

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