Тёмный

СВЯЗЫВАЕМ HTML Form C JavaScript. ВСЕ СПОСОБЫ ПОЛУЧЕНИЯ ДАННЫХ. FormData. 

wise.js 
Подписаться 18 тыс.
Просмотров 23 тыс.
50% 1

В этом видео я рассказываю о всех способах извлечения данных из HTML формы с помощью JavaScript. FormData. СВЯЗЫВАЕМ HTML Form C JavaScript.
⏱ Таймкоды:
01:21 Метод #1: Найти каждое поле через селектор
05:19 Метод #2: Найти все поля одним селектором
09:07 Метод #3: Получить из HTML элемента формы по ключам name
12:33 Метод #4: Получить из свойства elements формы
15:08 Метод #5: Через конструктор FormData
16:50 Метод #6: Через цикл for...of
Телеграмм канал WiseJS: t.me/frontend_tips
💻 Код с примеров:
Метод #1 - jsfiddle.net/mz8tsxrj/1/
Метод #2 - jsfiddle.net/mz8tsxrj/2/
Метод #3 - jsfiddle.net/mz8tsxrj/3/
Метод #4 - jsfiddle.net/mz8tsxrj/4/
Метод #5 - jsfiddle.net/mz8tsxrj/5/
Метод #6 - jsfiddle.net/mz8tsxrj/6/

Опубликовано:

 

29 авг 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@user-dk6mj3xk9t
@user-dk6mj3xk9t 3 года назад
Спасибо огромное за преподнесенные вариации использования. Круть!!!
@alexivanov8239
@alexivanov8239 2 года назад
Отличное объяснение, рад, что нашел канал. Автору просьба не останавливаться и продолжать свои труды)
@kirillguryanov4925
@kirillguryanov4925 2 года назад
Хорошее видео и объяснил хорошо, и лаконично. Спасибо!
@user-qf4zx9qt6r
@user-qf4zx9qt6r 2 года назад
Отличный материал! Давно искал что-то подобное.
@hasst9261
@hasst9261 3 года назад
Отличный формат
@arthurgritsishin3164
@arthurgritsishin3164 2 года назад
Спасибо огромное!!! Ты избавил от мучений ;)
@user-ie7md3mm6x
@user-ie7md3mm6x 2 года назад
С первых секунд всё четко и по делу. Структурируешь контент и запариваешься с подачей (даже произношение английских слов). Спасибо, с меня лайк + саб :)
@wisejs
@wisejs 2 года назад
Спасибо за поддержку)
@v.demchenko
@v.demchenko Год назад
Супер контент, спасибо за информацию. Именно то, что я искал.
@user-ht5qv3wy4z
@user-ht5qv3wy4z 2 года назад
Круть! Много полезного узнал, спасибо =)
@user-np7mn1rc5m
@user-np7mn1rc5m 2 года назад
Здорово! ... Спасибо.
@olgayushchyshyna5884
@olgayushchyshyna5884 3 года назад
Очень полезно. Благодарю
@wisejs
@wisejs 3 года назад
cпасибо!
@tatyanashurinova8161
@tatyanashurinova8161 3 года назад
Спасибо, видео очень полезное! О некоторых методах даже и не знала
@wisejs
@wisejs 3 года назад
cпасибо!
@user-oo6wc4dr1l
@user-oo6wc4dr1l Год назад
Дуже вдячна !
@ramilnazmiev9448
@ramilnazmiev9448 3 года назад
Спасибо тебе большое
@sergsagan
@sergsagan 3 года назад
Круто, действительно полезные варианты (особенно 5 и 6)
@wisejs
@wisejs 3 года назад
cпасибо!
@raff_m_d6971
@raff_m_d6971 Год назад
Очень круто
@user-nr2mg1pg6v
@user-nr2mg1pg6v 3 года назад
Вот что надо!!! Еле нашёл!!! Для работы с микроконтроллёрами то что надо. 👍👍👍
@daniil__kryuchkov
@daniil__kryuchkov 2 года назад
микроконтроллЁрами??)
@user-hj9nt5ne2r
@user-hj9nt5ne2r Год назад
​@@daniil__kryuchkov да😅😅
@userbilas
@userbilas 3 года назад
Приятно смотреть что тут используют ECMA6, лайк и подписка) Да и так, освежил в памяти)
@jaycemarcelo2634
@jaycemarcelo2634 2 года назад
you prolly dont give a shit but if you are stoned like me during the covid times you can watch all of the new series on Instaflixxer. Have been watching with my brother for the last few months xD
@armandonicolas2651
@armandonicolas2651 2 года назад
@Jayce Marcelo Yup, have been using InstaFlixxer for months myself :)
@murcha5899
@murcha5899 Год назад
Умничка❤
@user-tm4fq5bk1j
@user-tm4fq5bk1j 2 года назад
Спасибо за видео. Хотелось бы ещё понять, следующее. Пользователь ввел эти данные и отправил. Как эти данные увидеть владельцу сайта? Можете сделать такое видео.
@redolfos_official
@redolfos_official 2 года назад
Получается что бы их перенести в google таблицы, какие данные нужно внести?
@phitrow
@phitrow 2 года назад
Следовало бы разобрать примеры передачи данных из формы в pop-up/модальные окна автоматом, по событиям или кнопкам. 2. Всегда выводить в консоль не интересно, хоть бы раз вывел куда-то на страницу. (А вдруг какие-то нюансы будут...); document.write() долго писать?!
@TheFastmind
@TheFastmind 2 года назад
👍
@Tiko090
@Tiko090 2 года назад
Привет. У меня такой вопрос. То что ты заполняешь в формах видна тебе в консоле. Но будет ли видна это информация у тебя в консоле если его заполнит другой пользователь?
@wisejs
@wisejs 2 года назад
Конечно нет. Это клиентский код и работает он только у пользователя. Для остальных операций нужен бекенд.
@DerAleksey
@DerAleksey Год назад
здесь же почти везде используется деструктуризация?
@grantorino3465
@grantorino3465 3 года назад
6 способ - for of был добавлен в ES6. Т.е. все твои деструктуризации из предыдучих примеров это типа не ES6...
@GoldEgas
@GoldEgas Год назад
наконец-то нормальный урок для не очень умных или бэкендерам, которым резко понадобился JS
@dr.Dramen
@dr.Dramen 2 года назад
почему у меня выдает ?: const {form} = document.forms undefined но если я просто присваиваю в переменную document.forms, то это HTML коллекция
@wisejs
@wisejs 2 года назад
Может в момент выполнения скрипта еще нет формы? Оберните весь код в DOMContentLoaded.
@grantorino3465
@grantorino3465 3 года назад
только если радио или чек елементов несколько, и передавать нужно конкретное его выбранное значение, то твои способы нужно допиливать
@yevheniikhasanov2622
@yevheniikhasanov2622 3 года назад
Можешь подсказать? Он не ищет выбранный radio, и в объект values попадает последний button у которого type radio. Как можно переделать и все таки получить нужный?
@grantorino3465
@grantorino3465 3 года назад
@@yevheniikhasanov2622 нужно выбирать по псевдоселектору :checked. В гугле полно примеров.
@darksnaper
@darksnaper 2 года назад
А как сохранять данные куда-то, а нет только в консоль отправлять?
@wisejs
@wisejs 2 года назад
например, куда?
@darksnaper
@darksnaper 2 года назад
@@wisejs в гугл таблицы, просто в текстовый документ, в JSON
@wisejs
@wisejs 2 года назад
@@darksnaper В любом из выше перечисленных способов нужен сервер, который обработает ваш запрос и сохранит данные в нужном вам месте.
@darksnaper
@darksnaper 2 года назад
@@wisejs а сервер на жс возможен?
@wisejs
@wisejs 2 года назад
@@darksnaper более чем. На node.js или deno.
@vladyslavtymoshenko5355
@vladyslavtymoshenko5355 2 года назад
4 и 5 методы выдают ошибку (Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
Далее
I need your help..
00:28
Просмотров 4,9 млн
НЕБЛАГОДАРНЫЙ ВНУК #shorts
00:22
Просмотров 314 тыс.
Промисы в Javascript
21:55
Просмотров 29 тыс.
JavaScript v. 2.0 Работаем с формами
27:07
Что такое keyof typeof в TypeScript.
8:46
Просмотров 18 тыс.
Загрузка файлов с фронтенда
18:49