Как получить данные из формы js

Извлечение данных из HTML формы с помощью JavaScript

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

HTML + CSS код

Все элементы управления и поля формы должны обязательно находится внутри тега form.

body font-family: sans-serif;
font-weight: 700;
background-color: yellow;
>

form div margin: 12px;
>

form button margin-top: 10px;
font-weight: 700;
padding: 10px 20px;
font-size: large;
>

JavaScript код

После создания формы в HTML, мы можем обратится к элементу form для получения введенных пользователем данных через JavaScript. Наша форма состоит из четырех полей: name, age, terms, plan и одной кнопки submit. Найдем все поля формы по отдельности через селектор, получим данные и запишем их в объект. В дальнейшем этот объект будет передаваться на сервер.

Найдем элемент form по идентификатору с помощью метода document.getElementById.

const form = document.getElementById(‘form’);

При отправки формы сработает событие submit, которое мы будем отслеживать при помощи слушателя addEventListener. Передадим первым параметром отслеживаемое событие submit (клик по кнопке), а вторым параметром название callback-функции. Данная функция запустится сразу после клика по кнопке.

После нажатия на кнопку Отправить, браузер перезагрузится, что нежелательно. Поэтому отменим дефолтное поведение браузера с помощью метода preventDefault (предотвратить действия по умолчанию). Передадим объект события в аргументах функции и вызовем метод preventDefault для события event.

function getFormValue(event) event.preventDefault();

Что должна делать функция getFormValue? Внутри функции мы получим поля формы и извлечем из них значения.

const name = form.querySelector(‘[name=»name»]’), //получаем поле name
age = form.querySelector(‘[name=»age»]’), //получаем поле age
terms = form.querySelector(‘[name=»terms»]’), //получаем поле terms
plan = form.querySelector(‘[name=»plan»]’); //получаем поле plan

Создадим объект, в который запишем полученные нами данные. Их текстовых полей получим значения data, а из поля с типом checkbox нам нужно получить состояние checked (отмеченную галочку).

const data = name: name.value,
age: age.value,
plan: plan.value,
terms: terms.checked
>;

Для проверки, выведем в консоль объект data.

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

Выводы

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

Создано 19.04.2021 10:23:15

Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Работа с формами

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

Трюки для работы с формами в JS проще всего показать на примере. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. В этой форме мы немножко приправим стандартные HTML-атрибуты динамикой на JS.

Разметка и требования

Скопировать ссылку «Разметка и требования» Скопировано

Наша форма заявки на участие в миссии «Mars Once» будет состоять из шести полей. В форме мы собираем следующие данные:

• Имя, чтобы знать, как обращаться в ответном письме.
• Почту, чтобы знать, куда это письмо слать.
• Возраст — нужны только молодые ��‍♂️
• Специализацию — инженеры и учёные пригодятся для основной работы, а психологи нужны, чтобы команда друг друга не перегрызла за десятилетнюю колонизаторскую миссию.
• Работал ли человек в NASA — это большой плюс.
• Фотография, чтобы использовать в печатных материалах.

   Ваше имя:  Почта:  Возраст:  Профессия:  Инженер Учёный Психолог Другая    Я работал в NASA  Фото:   Отправить заявку  form id="mars-once" action="/apply/" method="POST"> label> Ваше имя: input type="text" name="name" id="name" placeholder="Илон Маск" required autofocus> label> label> Почта: input type="email" name="email" id="email" placeholder="elon@musk.com" required> label> label> Возраст: input type="number" name="age" required> label> label> Профессия: select name="specialization" required> option value="engineer" selected>Инженерoption> option value="scientist">Учёныйoption> option value="psychologist">Психологoption> option value="other">Другаяoption> select> label> label> Я работал в NASA input type="checkbox" name="nasa-experience" value="1"> label> label> Фото: input type="file" accept="image/jpeg" name="photo" required> label> button type="submit">Отправить заявкуbutton> form>    Скопировать Скопировано Не удалось скопировать   

В целом форма рабочая: обязательные поля не пропустят пустые значения, атрибут type проследит, чтобы вместо почты нам не прислали номер телефона, а по нажатию на кнопку валидная форма отправит все данные.

Но нам кроме всего этого хочется:

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

Отправка без перезагрузки

Скопировать ссылку «Отправка без перезагрузки» Скопировано

Первым делом настроим отправку формы без перезагрузки страницы.

Перезагрузка страницы — это поведение по умолчанию для отправки формы. Чтобы его предотвратить, нам нужно «перехватить» управление в момент отправки и сказать форме, что делать вместо этого.

Предотвращаем отправку данных

Скопировать ссылку «Предотвращаем отправку данных» Скопировано

Для «предотвращения» срабатывания событий мы можем использовать метод prevent Default ( ) на объекте события. В нашем случае событием будет отправка формы — submit .

Если наше событие находится в переменной event , то для предотвращения поведения по умолчанию мы можем вызвать event . prevent Default ( ) .

Чтобы «соединить» форму с нашей будущей собственной отправкой данных, мы напишем функцию, которая будет «слушать» событие отправки и реагировать на него.

Найдём форму на странице, с помощью get Element By Id и подпишемся на событие submit с помощью add Event Listener . Пока мы не будем отправлять форму, а просто напечатаем в консоль строку «Отправка!» и убедимся, что механизм работает:

 function handleFormSubmit(event)  // Просим форму не отправлять данные самостоятельно event.preventDefault() console.log('Отправка!')> const applicantForm = document.getElementById('mars-once')applicantForm.addEventListener('submit', handleFormSubmit) function handleFormSubmit(event)  // Просим форму не отправлять данные самостоятельно event.preventDefault() console.log('Отправка!') > const applicantForm = document.getElementById('mars-once') applicantForm.addEventListener('submit', handleFormSubmit)    Скопировать Скопировано Не удалось скопировать   

Мы можем просто передать функцию handle Form Submit ( ) как второй аргумент в add Event Listener ( ) , так как он автоматически передаст событие в качестве аргумента для handle Form Submit ( ) .

Получится, что при отправке формы сработает событие submit , которое запустит наш обработчик handle Form Submit ( ) .

В этот обработчик как аргумент event будет передано событие отправки. Мы вызовем event . prevent Default ( ) , и форма не отправится самостоятельно.

Собираем данные из формы

Скопировать ссылку «Собираем данные из формы» Скопировано

Следующий шаг — собрать всё, что необходимо отправить.

Нам не хочется собирать каждое значение отдельно.

• Это может быть долго: если форма состоит из 10 полей, это уже требует достаточно много кода.
• Это не масштабируется: если мы захотим добавить ещё пару полей, нам придётся писать код и для этих полей тоже.

Вместо этого мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. Напишем функцию serialize Form :

 function serializeForm(formNode)  console.log(formNode.elements)> function handleFormSubmit(event)  event.preventDefault() serializeForm(applicantForm)> const applicantForm = document.getElementById('mars-once')applicantForm.addEventListener('submit', handleFormSubmit) function serializeForm(formNode)  console.log(formNode.elements) > function handleFormSubmit(event)  event.preventDefault() serializeForm(applicantForm) > const applicantForm = document.getElementById('mars-once') applicantForm.addEventListener('submit', handleFormSubmit)    Скопировать Скопировано Не удалось скопировать   

Аргумент функции serialize Form — это элемент формы. Именно элемент — не селектор, а конкретный узел в DOM-дереве.

У форм есть свойство elements , которое содержит в себе все элементы управления и поля этой формы. Именно этим свойством мы воспользуемся, чтобы получить все данные из формы.

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

HTMLFormControlsCollection 0 1 2 3 4 5 6 Отправить заявку 

Обратите внимание, что тип этого набора элементов — HTML Form Controls Collection . Это не массив и, чтобы пройтись циклом по списку элементов, нужно превратить его в массив с помощью вызова Array . from ( ) .

Нам останется собрать имя и значение каждого из полей. Для начала, выведем имя и значение каждого элемента в консоль:

 function serializeForm(formNode)  const < elements >= formNode Array.from(elements) .forEach((element) =>  const < name, value >= element console.log(< name, value >) >)> function serializeForm(formNode)  const  elements > = formNode Array.from(elements) .forEach((element) =>  const  name, value > = element console.log( name, value >) >) >    Скопировать Скопировано Не удалось скопировать   

Мы получили список элементов, преобразовали его в массив и прошлись по каждому элементу. У каждого элемента получили поля name и value и вывели их в консоль.

В консоли после запуска получим вывод по каждому из полей:

1 2 3 4 5 6 7

Заметим, что последняя строчка не имеет ни названия, ни значения. Это потому, что последний элемент, который мы проверяли — это кнопка.

Чтобы элементы без названия нам не мешались, мы отфильтруем наш набор. Воспользуемся методом filter , чтобы отбросить элементы с пустым именем. Также заменим метод for Each на map — он соберёт нам массив, который хранит объект с именем и значением каждого отфильтрованного элемента.

 function serializeForm(formNode)  const < elements >= formNode const data = Array.from(elements) .filter((item) => !!item.name) .map((element) =>  const < name, value >= element return >) console.log(data)> function serializeForm(formNode)  const  elements > = formNode const data = Array.from(elements) .filter((item) => !!item.name) .map((element) =>  const  name, value > = element return  name, value > >) console.log(data) >    Скопировать Скопировано Не удалось скопировать   

На выходе в консоли получится массив из объектов с name и value :

 [ , , , , , ] [ name: 'name', value: 'Alex'>, name: 'email', value: 'some@mail.com'>, name: 'age', value: '24'>, name: 'specialization', value: 'engineer'>, name: 'nasa-experience', value: '1'>, name: 'photo', value: 'C:\\fakepath\\image.jpg'> ]    Скопировать Скопировано Не удалось скопировать   

Значения чекбоксов

Скопировать ссылку «Значения чекбоксов» Скопировано

Сейчас можно заметить, что nasa — experience имеет значение «1» . Это неправильно:

• мы не отмечали чекбокс, а значение почему-то «1» ;
• в целом хотелось бы, чтобы значение этого поля было булевым.

Для этого мы можем использовать особое свойство checked , которое есть у чекбоксов.

 const isOn = someCheckboxInput.checked const isOn = someCheckboxInput.checked    Скопировать Скопировано Не удалось скопировать   

Значение этого поля как раз булево, и мы можем использовать это в нашей функции serialize Form .

Но это свойство мы хотим использовать только на чекбоксе, а не на остальных полях. Это тоже можно сделать. Прочитаем тип элемента и, если он «checkbox» , то возьмём в качестве значения поле checked :

 function serializeForm(formNode)  const < elements >= formNode const data = Array.from(elements) .map((element) =>  const < name, type >= element const value = type === 'checkbox' ? element.checked : element.value return >) .filter((item) => !!item.name) console.log(data)> function serializeForm(formNode)  const  elements > = formNode const data = Array.from(elements) .map((element) =>  const  name, type > = element const value = type === 'checkbox' ? element.checked : element.value return  name, value > >) .filter((item) => !!item.name) console.log(data) >    Скопировать Скопировано Не удалось скопировать   

Теперь значение поля nasa — experience будет true , если чекбокс отмечен, и false , если пропущен. Увидим такой вывод:

 [ , , , , , ] [ name: 'name', value: 'Alex'>, name: 'email', value: 'some@mail.com'>, name: 'age', value: '24'>, name: 'specialization', value: 'engineer'>, name: 'nasa-experience', value: false>, name: 'photo', value: 'C:\\fakepath\\image.jpg'> ]    Скопировать Скопировано Не удалось скопировать   

Формат данных

Скопировать ссылку «Формат данных» Скопировано

В целом, нынешний формат данных в виде массива объектов нам может и подойти, но мы с вами используем кое-что лучше — Form Data .

Form Data — это особый тип данных, который можно использовать для отправки данных формы на сервер.

Мы воспользуемся им, чтобы сохранить данные из формы. Создадим экземпляр с помощью new Form Data ( ) , откажемся от массива со значениями и будем добавлять имена полей и их значения в Form Data с помощью вызова функции append :

 function serializeForm(formNode)  const < elements >= formNode const data = new FormData() Array.from(elements) .filter((item) => !!item.name) .forEach((element) =>  const < name, type >= element const value = type === 'checkbox' ? element.checked : element.value data.append(name, value) >) return data> function serializeForm(formNode)  const  elements > = formNode const data = new FormData() Array.from(elements) .filter((item) => !!item.name) .forEach((element) =>  const  name, type > = element const value = type === 'checkbox' ? element.checked : element.value data.append(name, value) >) return data >    Скопировать Скопировано Не удалось скопировать   

Но так как тип Form Data специально создан для работы с формами, можно сделать гораздо проще ��

 function serializeForm(formNode)  return new FormData(formNode)> function serializeForm(formNode)  return new FormData(formNode) >    Скопировать Скопировано Не удалось скопировать   

Стоит отметить, что nasa — experience в таком случае попадёт в финальные данные, только если чекбокс отметили. Если его не отметить, то в финальных данных он не окажется.

Когда чекбокс nasa — experience выделен, получим такой вывод:

 [ ['name', 'Alex'], ['email', 'example@test.com'], ['age', '24'], ['specialization', 'engineer'], ['nasa-experience', '1'], ['photo', File],] [ ['name', 'Alex'], ['email', 'example@test.com'], ['age', '24'], ['specialization', 'engineer'], ['nasa-experience', '1'], ['photo', File], ]    Скопировать Скопировано Не удалось скопировать   

Когда чекбокс не выделен — такой:

 [ ['name', 'Alex'], ['email', 'example@test.com'], ['age', '24'], ['specialization', 'engineer'], ['photo', File],] [ ['name', 'Alex'], ['email', 'example@test.com'], ['age', '24'], ['specialization', 'engineer'], ['photo', File], ]    Скопировать Скопировано Не удалось скопировать   

В первом случае чекбокс был отмечен, поэтому в списке есть элемент nasa — experience , во втором случае чекбокс был пропущен, поэтому такого элемента в списке данных нет.

Чтобы проверить, какие данные в себе содержит переменная типа Form Data , можно использовать метод .entries ( ) , он выведет список с данными, как в примере выше.

 console.log(Array.from(data.entries())) console.log(Array.from(data.entries()))    Скопировать Скопировано Не удалось скопировать   

Отправка на сервер

Скопировать ссылку «Отправка на сервер» Скопировано

Теперь нам надо данные из формы отправить на сервер. Представим, что наш бэкенд предоставляет API-эндпоинт для сохранения данных. Попробуем отправить их.

Функция будет асинхронной, потому что работает с сетевыми запросами. В качестве аргумента она принимает Form Data и отправляет запрос с помощью вызова fetch . Нам нужно указать правильный заголовок Content — Type у запроса, для формы он ‘multipart / form — data’ :

 async function sendData(data)  return await fetch('/api/apply/',  method: 'POST', headers: < 'Content-Type': 'multipart/form-data' >, body: data, >)> async function sendData(data)  return await fetch('/api/apply/',  method: 'POST', headers:  'Content-Type': 'multipart/form-data' >, body: data, >) >    Скопировать Скопировано Не удалось скопировать   

Функция вернёт результат запроса к серверу, который мы сможем проверить на ошибки.

Теперь используем эту функцию в обработчике события отправки. Сериализуем форму и передадим её в функцию отправки. Вместо обращения напрямую к форме, будем читать её из объекта события. Форма в объекте события submit будет храниться в свойстве target :

 async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) const response = await sendData(data)> async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) const response = await sendData(data) >    Скопировать Скопировано Не удалось скопировать   

Обратите внимание, что функция handle From Submit ( ) стала асинхронной, так как она вызывает другую асинхронную функцию и дожидается её результата. Внутри response будет поле status , по которому мы сможем определить, успешно ли прошёл запрос и вывести соответствующее сообщение пользователю.

Обработка загрузки и вывод сообщения о результате

Скопировать ссылку «Обработка загрузки и вывод сообщения о результате» Скопировано

Теперь немножко улучшим UX нашей формы. Сейчас она просто отправляет данные и ничего не сообщает пользователям. Это не круто, потому что отправителю будет непонятно, получилось ли записаться в «Mars Once» или нет.

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

Начнём с лоадера.

Показываем лоадер во время отправки

Скопировать ссылку «Показываем лоадер во время отправки» Скопировано

У нас вместо лоадера будет просто показываться строка «Sending. »

Добавим его после кнопки и спрячем:

   .hidden  display:none; >   Отправить заявку 
Отправляем.
   style> .hidden  display:none; > style> form id="mars-once" action="/apply/" method="POST"> button type="submit">Отправить заявкуbutton> div id="loader" class="hidden">Отправляем. div> form>    Скопировать Скопировано Не удалось скопировать   

Прячем мы его, потому что хотим показать только во время запроса. Для этого напишем функцию, которые будут управлять его состоянием — делать лоадер видимым, если он не виден сейчас, и скрывать, если он виден. Так как технически это добавление и удаление класса hidden , то можно воспользоваться функцией toggle из class List API:

 function toggleLoader()  const loader = document.getElementById('loader') loader.classList.toggle('hidden')> function toggleLoader()  const loader = document.getElementById('loader') loader.classList.toggle('hidden') >    Скопировать Скопировано Не удалось скопировать   

Вызовем эту функцию до отправки запроса, чтобы показать лоадер, и после запроса, чтобы скрыть. Лоадер будет виден до тех пор, пока запрос не завершится:

 async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const response = await sendData(data) toggleLoader()> async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const response = await sendData(data) toggleLoader() >    Скопировать Скопировано Не удалось скопировать   

Обрабатываем успешную отправку

Скопировать ссылку «Обрабатываем успешную отправку» Скопировано

Давайте теперь проверять ответ сервера. Допустим, нам хочется, чтобы при успешной отправке мы показывали alert ( ) с сообщением об успешной отправке и прятали форму:

 function onSuccess(formNode)  alert('Ваша заявка отправлена!') formNode.classList.toggle('hidden')> function onSuccess(formNode)  alert('Ваша заявка отправлена!') formNode.classList.toggle('hidden') >    Скопировать Скопировано Не удалось скопировать   

Мы должны вызвать on Success , только если форма была отправлена успешна. Для этого добавим проверку на статус ответа сервера — он должен быть 200 в случае успеха (статусы ответа разобраны в статье про HTTP протокол):

 // Вызовем её вот так:async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const < status >= await sendData(data) toggleLoader() if (status === 200)  onSuccess(event.target) >> // Вызовем её вот так: async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const  status > = await sendData(data) toggleLoader() if (status === 200)  onSuccess(event.target) > >    Скопировать Скопировано Не удалось скопировать   

При успешной отправке покажется это сообщение, а форма пропадёт.

Обрабатываем ошибки

Скопировать ссылку «Обрабатываем ошибки» Скопировано

Если что-то пошло не так, то мы хотим сказать пользователям об этом. Напишем функцию, которая будет вызывать alert ( ) с сообщением, которое пришлёт сервер в случае ошибки:

 function onError(error)  alert(error.message)> function onError(error)  alert(error.message) >    Скопировать Скопировано Не удалось скопировать   

Мы могли бы вызвать alert сразу на месте, но лучше вынести обработку ошибки в отдельную функцию. Так, если нам захочется добавить какие-то действия по обработке ошибок, нам будет проще ориентироваться в коде.

Вместе со статусом будем получать информацию об ошибке из поля error . Если запрос был успешным, то error будет пустым, но в случае ошибки там будет лежать сообщение:

 async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const < status, error >= await sendData(data) toggleLoader() if (status === 200)  onSuccess(event.target) > else  onError(error) >> async function handleFormSubmit(event)  event.preventDefault() const data = serializeForm(event.target) toggleLoader() const  status, error > = await sendData(data) toggleLoader() if (status === 200)  onSuccess(event.target) > else  onError(error) > >    Скопировать Скопировано Не удалось скопировать   

Если что-то пошло не так, мы увидим причину. Форма останется на месте.

Блокируем кнопку отправки на невалидной форме

Скопировать ссылку «Блокируем кнопку отправки на невалидной форме» Скопировано

Сейчас кнопку отправки можно нажать в любой момент, даже если форма невалидна. И хоть пользователь не сможет отправить форму из-за HTML-валидации, было бы неплохо предупредить, что кнопку нажимать пока рано.

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

Напишем функцию, которая будет проверять валидность формы и блокировать кнопку, если требуется. Аргументом она будет принимать событие ввода с клавиатуры на полях ввода.

Так как событие ввода будет происходить на полях, а не на самой форме, то значение event . target — это поле. Чтобы получить форму, воспользуемся свойством form , значением которого является ссылка на родительскую форму.

Проверять валидность формы будем с помощью метода check Validity ( ) формы. Он запускает стандартные проверки. Результат проверки будем использовать, для того чтобы установить свойство disabled кнопки в значение true , если нужно заблокировать, и false , если кнопка должна быть доступна.

 function checkValidity(event)  const formNode = event.target.form const isValid = formNode.checkValidity() formNode.querySelector('button').disabled = !isValid> applicantForm.addEventListener('input', checkValidity) function checkValidity(event)  const formNode = event.target.form const isValid = formNode.checkValidity() formNode.querySelector('button').disabled = !isValid > applicantForm.addEventListener('input', checkValidity)    Скопировать Скопировано Не удалось скопировать   

Теперь, пока форма не будет заполнена, кнопка будет заблокирована.

Что у нас получилось

Скопировать ссылку «Что у нас получилось» Скопировано

Мы сделали форму, которая отправляет данные без перезагрузки страницы, показывает сообщение об ошибке или успешной отправке и блокирует кнопку, пока не введены значения.

Для всего этого мы использовали методы HTML-элементов и элементов форм, которые нам предоставляет браузер и веб-платформа.

Конечно, этим работа с формами не заканчивается. Ещё можно сделать валидацию каждого поля в отдельности, загрузку картинок с возможностью их редактирования, добавить всякие комбо-боксы и нестандартные элементы.

Но для первой формы, с которой мы работали в JS, этого достаточно ��

Как получить данные формы и показать их на странице JavaScript

Есть форма, для ввода данных. Как получить из нее данные и после нажатия на кнопку показать на странице?

Как вывести данные формы в div, при помощи JavaScript?
Отслеживать
задан 8 фев 2018 в 21:08
Yurii Space Yurii Space
153 1 1 золотой знак 3 3 серебряных знака 15 15 бронзовых знаков
– user176262
8 фев 2018 в 21:23

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

ну вот самый простой вариант:

document.getElementById('MyForm').addEventListener('submit', function(e) < // что бы не отправилась форма. e.preventDefault(); document.getElementById('name').innerHTML = document.getElementById('form-name').value 

можете заменить на document.querySelector('#id.class') - как в css

Отслеживать
ответ дан 8 фев 2018 в 21:18
Юрий Копоть Юрий Копоть
2,439 10 10 серебряных знаков 14 14 бронзовых знаков

document.getElementById('MyForm').addEventListener('submit', function (e) < e.preventDefault() var inps = document.querySelectorAll("input, select, textarea") for (var q=0; q> >)

Отслеживать
ответ дан 8 фев 2018 в 22:16
122k 24 24 золотых знака 124 124 серебряных знака 297 297 бронзовых знаков

Можно программно повесить onsubmit слушателя на MyForm.

MyForm.addEventListener('submit', function(e) < e.preventDefault(); //Чтобы форма не отправлялась document.getElementById('name').innerHTML = document.getElementById('form-name').value; >); 

Отслеживать
ответ дан 9 фев 2018 в 2:33
997 9 9 серебряных знаков 29 29 бронзовых знаков

• javascript
• form

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.