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

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

  • автор:

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

Чтобы получить данные из формы, можно воспользоваться объектом FormData . Этот объект содержит метод get() , с помощью которого можно извлечь данные по имени.

 id="form1">  type="text" name="name" value="John">  type="text" name="surname" value="Smith">  type="submit">  

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

const formElement = document.getElementById('form1'); // извлекаем элемент формы formElement.addEventListener('submit', (e) =>  e.preventDefault(); const formData = new FormData(formElement); // создаём объект FormData, передаём в него элемент формы // теперь можно извлечь данные const name = formData.get('name'); // 'John' const surname = formData.get('surname'); // 'Smith' >); 

Свойства и методы формы

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

Работать с формами станет намного удобнее, когда мы их изучим.

Навигация: формы и элементы

Формы в документе входят в специальную коллекцию document.forms .

Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.

document.forms.my - форма с именем "my" (name="my") document.forms[0] - первая форма в документе

Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .

    

Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .

В этом случае form.elements[name] является коллекцией, например:

    

Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .

как «подформа»

Форма может содержать один или несколько элементов внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.

  
info

Сокращённая форма записи: form.name

Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .

Другими словами, вместо form.elements.login мы можем написать form.login .

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

В этом легче разобраться на примере:

   

Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.

Обратная ссылка: element.form

Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.

   

Элементы формы

Рассмотрим элементы управления, используемые в формах.

input и textarea

К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

input.value = "Новое значение"; textarea.value = "Новый текст"; input.checked = true; // для чекбоксов и переключателей

Используйте textarea.value вместо textarea.innerHTML

Обратим внимание: хоть элемент и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.

Там хранится только тот HTML, который был изначально на странице, а не текущее значение.

select и option

Элемент имеет 3 важных свойства:

  1. select.options – коллекция из подэлементов ,
  2. select.value – значение выбранного в данный момент ,
  3. select.selectedIndex – номер выбранного .

Они дают три разных способа установить значение в :

  1. Найти соответствующий элемент и установить в option.selected значение true .
  2. Установить в select.value значение нужного .
  3. Установить в select.selectedIndex номер нужного .

Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.

Вот эти способы на примере:

  

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

Их коллекцию можно получить как select.options , например:

   

new Option

Элемент редко используется сам по себе, но и здесь есть кое-что интересное.

В спецификации есть красивый короткий синтаксис для создания элемента :

option = new Option(text, value, defaultSelected, selected);
  • text – текст внутри ,
  • value – значение,
  • defaultSelected – если true , то ставится HTML-атрибут selected ,
  • selected – если true , то элемент будет выбранным.

Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).

let option = new Option("Текст", "value"); // создаст 

Тот же элемент, но выбранный:

let option = new Option("Текст", "value", true, true);

Элементы имеют свойства:

option.selected Выбрана ли опция. option.index Номер опции среди других в списке . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).

Ссылки

  • Спецификация: https://html.spec.whatwg.org/multipage/forms.html.

Итого

Свойства для навигации по формам:

document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для . element.form Элементы хранят ссылку на свою форму в свойстве form .

Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.

Для элемента мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .

Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.

В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.

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

onclick — грустная затея, скажем прямо. Не говоря уж о том, что автор так и не ответил до сих пор когда ему нужно получать это значение.

25 июн 2015 в 15:16

онклик — это такая вариация псевдокода. В «настоящем сайте», разумеется, должен быть какой-нибудь там jquery с, допустим, .on(‘click’) или там .on(‘submit’), и все такое, да и alert, наверное, не нужен, а нужно что-то сделать с полученным значением, но для иллюстрации принципа, не множа сущности, самое то, как мне кажется.

25 июн 2015 в 15:24

Нет, иллюстрация использования onclick приводит к тому, что его (и только его) потом активно используют. А потом без слёз не взглянешь на то, что наделают. И повторюсь: мы по-прежнему не знаем при каких условиях автору нужно значение. Я поэтому код вообще размещать не стал — посижу, подожду. Сейчас — это чистой воды гадание.

Получаем данные из поля ввода с помощью input.value

Мы научились с помощью скрипта изменять текст на странице, когда пользователь отправляет форму. У нас это форма подписки на рассылку, и нам нужно сообщить пользователю, что он успешно подписался. Сообщение будет выглядеть так:

Адрес e-mail добавлен в список получателей рассылки.

Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?

Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :

Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:

let input = document.querySelector('input'); console.log(input.value); // Выведет: Кекс

А ещё мы можем вывести данные из поля ввода прямо на страницу. Представим, что у нас на странице есть абзац, который мы нашли и сохранили в переменную paragraph . Мы можем сделать так:

paragraph.textContent = input.value;

И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .

В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.

Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • script.js Сплит-режим

FlashNews!

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.


JavaScript

let page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’); let form = document.querySelector(‘.subscription’); // Объявите переменную здесь form.onsubmit = function(evt) < evt.preventDefault(); // Измените значение textContent на следующей строке message.textContent = 'Форма отправлена!'; >;

Показать ответ

Спасибо! Мы скоро всё исправим)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *