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

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

  • автор:

Как получить значение из input javascript

Чтобы получить значение из элемента input , достаточно обратиться к свойству value . Например, если на странице имеется такой элемент ввода:

 id="input-id"> 

то из него можно получить значение следующим образом

const input = document.getElementById('input-id'); // Извлекаем элемент input const value = input.value; // получаем занчение из input 

Получаем данные из поля ввода с помощью 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 .

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 15 апреля 2024. Всего от 5 790 ₽ в месяц.

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

  • 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 = 'Форма отправлена!'; >;

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

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

Курсы javascript

Выходит: Инпут 1, Инпут 2, Инпут 3.
Всё норм.
Но если на странице изменить в значениях инпута текст и попытаться снова его вывести в логи, то выводится старые значения, а не то что мы ввели.
Как исправить эту проблему?

Последний раз редактировалось erilar, 13.01.2021 в 03:23 .
13.01.2021, 04:06
Интересующийся
Регистрация: 07.01.2015
Сообщений: 11

Мда. Кодить в 3 часа ночи явно не нужно. Сам создал себе глупую ошибку.
valInput.push(inputs[index].defaultValue);
записывает изначальное значение.
Чтобы получить то, что мы вписываем в инпут нужно написать это:

valInput.push(inputs[index].value);

Спасибо всем за ответы и глупые вопросы «А зочем ето тебе нужна?», «А зочем тебе достоват из инпута валуе?»
Вопрос решен!

Последний раз редактировалось erilar, 13.01.2021 в 04:09 .
13.01.2021, 08:25
Регистрация: 27.05.2010
Сообщений: 33,055
erilar,

   Untitled        

Как получить данные с input?

Привет!
Подскажите пожалуйста, как можно получить данные с input с помощью JS?
Как это сделать с jquery знаю, а вот с JS возникли проблемы.

Комментировать
Решения вопроса 4

BenderLib

Например можн делать вот так:

Когда нажимаем на копку отправить то данные забираем. При помощи например данного кода на JS

document.forms.publish.onsubmit = function() < var message = this.message.value; console.log(message) return false; >;

Либо как написали выше можно делать:
document.getElementsByTagName(«input»)[0].value
Но тут есть свои нюансы

Ответ на Ваш комментарий:
Если нет кнопки в форме то можно воспользоваться событием onchange
Например вот форма без кнопки с событием onchange которое вызывает функцию на JS:

 

Подробно о событии onchange можете посмотреть тут: https://learn.javascript.ru/events-change

Ответ написан более трёх лет назад
Нравится 4 2 комментария
drtvader @drtvader Автор вопроса

Robot Chappie: А как сделать, так,кнопки никакой нет, но когда все данные правильно введены, то информация скриптом собиралась? Может коряво объяснил конечно.

BenderLib

drtvader: Ответ на этот вопрос добавил в основной ответ.

DmitryIvaneychik

Дмитрий Иванейчик @DmitryIvaneychik
Developer in VoxImplant

Вот JS:
document.getElementById(«input-id»).value;

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

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