Получаем данные из поля ввода с помощью input.value
Мы научились с помощью скрипта изменять текст на странице, когда пользователь отправляет форму. У нас это форма подписки на рассылку, и нам нужно сообщить пользователю, что он успешно подписался. Сообщение будет выглядеть так:
Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?
Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :
Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:
А ещё мы можем вывести данные из поля ввода прямо на страницу. Представим, что у нас на странице есть абзац, который мы нашли и сохранили в переменную paragraph . Мы можем сделать так:
И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .
В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.
Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .
How to get an input text value in JavaScript
When I put lol = document.getElementById(‘lolz’).value; outside of the function kk() , like shown above, it doesn’t work, but when I put it inside, it works. Can anyone tell me why?
13 Answers 13
The reason you function doesn’t work when lol is defined outside it, is because the DOM isn’t loaded yet when the JavaScript is first run. Because of that, getElementById will return null (see MDN).
You’ve already found the most obvious solution: by calling getElementById inside the function, the DOM will be loaded and ready by the time the function is called, and the element will be found like you expect it to.
There are a few other solutions. One is to wait until the entire document is loaded, like this:
Note the onload attribute of the <body> tag. (On a side note: the language attribute of the <script> tag is deprecated. Don’t use it.)
There is, however, a problem with onload : it waits until everything (including images, etc.) is loaded.
The other option is to wait until the DOM is ready (which is usually much earlier than onload ). This can be done with «plain» JavaScript, but it’s much easier to use a DOM library like jQuery.
jQuery’s .ready() takes a function as an argument. The function will be run as soon as the DOM is ready. This second example also uses .click() to bind kk’s onclick handler, instead of doing that inline in the HTML.
Свойства и методы формы
Формы и элементы управления, такие как <input> , имеют множество специальных свойств и событий.
Работать с формами станет намного удобнее, когда мы их изучим.
Навигация: формы и элементы
Формы в документе входят в специальную коллекцию document.forms .
Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.
Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .
Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .
В этом случае form.elements[name] является коллекцией, например:
Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .
Форма может содержать один или несколько элементов <fieldset> внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.
Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .
Другими словами, вместо form.elements.login мы можем написать form.login .
Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).
В этом легче разобраться на примере:
Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.
Обратная ссылка: element.form
Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.
Элементы формы
Рассмотрим элементы управления, используемые в формах.
input и textarea
К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.
Обратим внимание: хоть элемент <textarea>. </textarea> и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.
Там хранится только тот HTML, который был изначально на странице, а не текущее значение.
select и option
Элемент <select> имеет 3 важных свойства:
- select.options – коллекция из подэлементов <option> ,
- select.value – значение выбранного в данный момент <option> ,
- select.selectedIndex – номер выбранного <option> .
Они дают три разных способа установить значение в <select> :
- Найти соответствующий элемент <option> и установить в option.selected значение true .
- Установить в select.value значение нужного <option> .
- Установить в select.selectedIndex номер нужного <option> .
Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.
Вот эти способы на примере:
В отличие от большинства других элементов управления, <select> позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple . Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов <option> .
Их коллекцию можно получить как select.options , например:
new Option
Элемент <option> редко используется сам по себе, но и здесь есть кое-что интересное.
В спецификации есть красивый короткий синтаксис для создания элемента <option> :
- text – текст внутри <option> ,
- value – значение,
- defaultSelected – если true , то ставится HTML-атрибут selected ,
- selected – если true , то элемент <option> будет выбранным.
Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).
Тот же элемент, но выбранный:
Элементы <option> имеют свойства:
option.selected Выбрана ли опция. option.index Номер опции среди других в списке <select> . 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 также работает для <fieldset> . element.form Элементы хранят ссылку на свою форму в свойстве form .
Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.
Для элемента <select> мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .
Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.
В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.
Как получить данные из input на js
Если(например) у тега input есть атрибут name, то мы можем обратиться к тегу через атрибут name с помощью querySelector.
Что нужно для получения данных из value с помощью javascript
Нам потребуется тег input и внутрь поместим атрибут name
В данном случае, чтобы в живую показать, как будет происходить получение данных из input нам потребуется onclick.
На кнопку button повесим onclick с функцией
И уже в скрипте получим данные из value с помощью querySelector
И чтобы мы могли увидеть, что мы получили из input выведем через alert
Код для получения value с помощью querySelector через атрибут name
Соберем весь код вместе :
<input name="example" value="Здесь value, которое мы будем получать с помощью querySelector обращаясь к нему через атрибут name">
Далее используем выше приведенный рабочий код, как обратиться к инпуту с помощью querySelector через name:
Жми! Здесь обращаю ваше внимание.
Что querySelector — это универсальный инструмент и с помощью него можно таким же образом обратиться и к id, классу, вообще к любому атрибуту!(у нас не стоит такая задача прямо здесь это рассмотреть!)
Получить значение value input в javascript -> querySelector(tag)
Если у вас на странице есть единственный input
Либо ваш input стоит в Dom в самом верху, то мы можем обратиться к этому тегу input и получить оттуда данные из value
Опять начинаем с тега input и больше ничего не будет.
Чтоб опять вживую увидеть нам потребуется button с onclick
И далее повторяем все то, что делали в предыдущем пункте — получаем данные из input
И выводим через alert полученные данные из value
Соберем весь код вместе:
Как получить значение value input через id
Мы уже выше сказали, что обратиться к input можно по разному, в отношении id — сразу возникает два способа, первый, о котором сразу вспоминают все :
Как получить значение value input с помощью getElementById
У нас есть инпутinput, в котором есть value и у него есть какое-то значение + у него должен быть какой-то id. То к нему -то можно обратимся с помощью getElementById!
Сделаем кнопку с онклик, чтобы было в движении, в онклик будет функция, а в функции напишем alert
<input value="Здесь данные в value">
Чтобы получить данные в алерт нажмите кнопку !
Как получить значение value input через Id без функции
Можно ли получить значение input через Id без функции ?! Легко!
Берем выше идущий код, и вместо вот этого : document.getElementById(» name_id «).value пишем просто : name_id .value
<input value="Получение значение value без функции обратившись к Id">
Результат обращения и получения значения value из input без функции
Как получить значение value input через getElementsByClassName
Предположим, что у инпутаinput кроме класса нет ничего, и нам требуется обратиться к данному value через класс!
Конечно же мы можем обратиться к данному инпуту с помощью getElementsByClassName
Скопируем выше идущий код, добавим уже не ид, а класс(example). Как вы наверное знаете, что getElementsByClassName получает HTMLCollection и поэтому, нам нужно поставить квадратные скобки и указать порядковый номер данного инпута с этим классом — это у нас первый, поэтому ставим 0
<input value="Получение значение value обратившись к классуclass через getElementsByClassName " >
Пример получения значения value input через getElementsByClassName
Как получить значение value input через getElementsByName
<input name=»example» value="Получение значение value обратившись к имени(name) через getElementsByName" >
Пример получения значения value input через getElementsByName
Как получить значение value input в переменную
Продемонстрируем на коде:
Что вам потребуется, для того, чтобы получить значение value input в переменную
Как минимум должен быть тег input .
Нужно, как обычно, обратиться к тегу любым доступным способом.
В скрипте, в функции, где у вас будет просит ходить движение скрипта(в выше приведенных примерах это onclick) создаем переменную и присваиваем её значение полученное из тега.
Что означает value в javascript
Value в javascript — ничего не означает, потому, что value — это атрибут из html
javascript — может работать с данными из value : 1. — получить данные из value ,
2. — изменить value,
3. — либо удалить.
javascript — может работать с атрибутом value : 1. — удалить атрибут value
2. — добавить атрибут value
3. — заменить атрибут value
Как привязать значение input к тегу js
Нужно просто взять и получить данные из input , чему и была посвящена полностью данная страница!