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

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

  • автор:

JS получить значение input

В данном уроке мы рассмотрим способы, с помощью которых можно получить значение инпута через JavaScript. Пусть у нас есть следующий инпут:

Получим ссылку на этот инпут с помощью метода querySelector :

let input = document.querySelector(‘input’);

Расмотрим различные варианты получения значения инпута.

Вариант 1

Получим и выведем значение инпута:

let value = input.value; console.log(value);

Вариант 2

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

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

input.addEventListener(‘blur’, function() < >);

А теперь по потери фокуса получим и выведем значение инпута:

Как получить содержимое текстового поля (input) с помощью jQuery.

Предположим, что на веб-странице есть текстовое поле вот такого формата.

Иногда возникает необходимость вытащить текст, который в это текстовое поле будет вводить пользователь.

Здесь есть два варианта:

1. Нам нужен текст, который задан для текстового поля по умолчанию в атрибуте value.

В этом случае, получить значение этого атрибута можно вот так:

$(".mytext").attr("value")

Как это работает, можно посмотреть на следующем живом примере.

Все мои уроки по Javascript здесь.

2. Нужен текст, который пользователь будет вводить в это текстовое поле.

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

$('. mytext ').val()

Посмотрите на следующий пример и попробуйте ввести в это текстовое поле какой-либо текст.

$(document).ready ( function()< $(".mytext").keyup(function() < $('#contenInput').text($(".mytext").val()); >); >);

Все мои уроки по Javascript здесь.

Как получить input в JavaScript (1 часть)

Как получить input в JavaScript (1 часть)

На этом уроке мы научимся получать значения, введенные пользователями в поле input и совершать с ними арифметические действия.

HTML разметка

Возьмем за основу бутстраповскую разметку (getbootstrap.com), из раздела Components / Forms. У нас должна получиться форма с двумя полями для ввода чисел и кнопка. Сделаем тип полей у инпутов текстовым, для возможности ввода, как чисел, так и строк.

Умножение чисел

Для того чтобы обратиться конкретно к элементу input на языке JavaScript, нам нужно к этому элементу добавить уникальный идентификатор. Зададим двум полям input два разных идентификатора: inp_1 / inp_2. На одной странице не может быть двух одинаковых id. Иными словами, функция JS, может обратиться к input, только через название id.

Что мы хотим получить в итоге?

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

Событие JavaScript

Для того, чтобы при нажатии на кнопку что-то срабатывало, добавим событие onclick, при клике будет выполняться функция multi() (произвольное название), круглые скобочки обязательны. Они указывают, что это функция.

Как получить input в JavaScript.

Итак, у нас появилась форма, куда можно вводить числа, однако клик по кнопке ничего не дает. Пора заняться непосредственно программированием на JS.

Функция на JavaScript

Между тегами script напишем функцию function и название её multi(), затем внутри фигурных скобочек, пропишем выражение, результат которого, увидим на всплывающем окне alert.

JS получить значение input

Надо вывести результат умножения двух чисел в окне alert, но мы не знаем какие числа пользователь ввел, эти данные надо узнать. Для этого, внутри круглых скобочках alert, обращаемся к элементам input, через метод document.getElementById().

Расшифровывается метод так:

В текущем документе получить элемент по id. Этот метод получает весь элемент input, с классами, типом полей, а нам надо узнать только число, введенное пользователем в поле input — значение value.

Получить элемент с id inp_1 и из него вытащить только то, что ввел пользователь. Точно так же, вытаскиваем число и из второго поля.

Таким образом, JavaScript узнает числа, введенные пользователем, умножает их и выдает готовый результат в окне alert, после того, как пользователь кликнет по кнопке.

Как получить input в JavaScript.

Команда alert помогает разработчику, отлаживать код, находить ошибки в процессе разработки.

Что такое переменная

document.getElementById(‘inp_1’).value*document.getElementById(‘inp_2’).value

Это выражение прекрасно делает свою работу, но при каждом обращении к нему, нам надо переписывать его в таком длинном виде. Это неудобно, код в документе разрастается и становится трудночитаемым. Было бы удобно всю эту длинную запись целиком поместить в маленькую ячейку, на хранение, чтобы вытаскивать оттуда данные, когда потребуется. Такие ячейки и называются в программировании переменными.

Переменные это ячейки, куда можно что-то положить, а затем оттуда вытащить, используя только имя переменной. Продолжение следует..

Создано 28.12.2018 10:16:00

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

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

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

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

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

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

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

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

    dryg 23.06.2020 00:51:23

    а как приплюсовать например на моем личном сайте хотелось бы сделать чтоб сумма считалось при заполнении http://manyk.ru/

    dryg 23.06.2020 01:41:51

    вместо умножения ставлю + не работает мне надо для моего сайта сделать чтоб определить сумму стоимость работ и вывести на сайт http://manyk.ru/

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

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

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

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

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

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

    Формы в документе входят в специальную коллекцию 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 , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.

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

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