Javascript get input value

Javascript get input value

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

HTML разметка

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

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

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

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

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

Событие JavaScript

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

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

Функция на JavaScript

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

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

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

Читайте также:  Как перевести half life 2 на русский

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Обновить драйвера звука для windows 7

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

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

    HTML Forms contains various elements like input fields, options, textarea etc. and for further processing, we need to get value of each field using jQuery.

    This tutorial, Explains about, how to get input values of different HTML form elements using jQuery as follows:

    we have taken three form elements in our example – input field, radio button and a textarea.

    • To get value of input field.
    • To get value of Checked Radio Button.
    • Get value of Radio button with onChange.
    • To get value of Textarea field.

    To learn more, just watch our live demo and go through our complete HTML and jQuery codes given below.

    HTML file: form_value.html
    Given below our complete HTML code.

    jQuery File: form_value.js
    Given below our complete jQuery code.

    CSS File: form_value.css
    Styling HTML elements.

    Conclusion:
    This was all about to get values of different HTML Form elements. hope you like it, keep reading our other blogs.

    document.getElementById() — поиск по тегу с атрибутом id

    id на веб-странице может быть присвоен только один раз одному тегу HTML

    Задача: нужно вывести значение выбранного цвета рядом с полем ввода:

    document.getElementsByName() — поиск по NodeList тегов с атрибутом name

    Задача: прибавить значение только третьего включенного чекбокса, округлить до сотых и показать в формате 0.00 (с двумя знаками после запятой):
    1.00

    Читайте также:  Какие счетчики для воды лучше выбрать отзывы

    Задача: показать значение активного radio:
    1

    document.getElementsByClassName() — поиск по NodeList тегов с атрибутом class

    Задача: как поменять класс по клику (я предпочитаю это делать только силами CSS):

    document.body — поиск по тегу body

    Задача: сменить все h2 на h3:

    document.getElementsByTagName() — поиск по NodeList тегов

    Задача: заменить текст h3 выше:

    Задача: часы и дату разбить на два тега в списке :

    document.querySelector() — поиск по селектору

    Задача: показать степень заполнения полей, пароль и email должен быть внесён правильно.
    Почта
    Пароль

    document.querySelectorAll() — поиск по NodeList селекторов

    Помните этот пример? Там поиск идёт только по h3. Именно на него произойдет замена по этой кнопке. Если её не нажимать, то скрипт не будет работать. А вот так будет и при h2, и при h3

    11 комментариев:

    Анонимный Здравствуйте!
    У меня вот такой вопрос. Не подскажите.
    Есть 2 поля и две кнопки.
    Я хочу VALUE кнопок передать в поля.

    Просто значение например 1 кнопки передать в 1 поле понятно. Но хотелось бы. Что бы в поле попадало значение кнопки которую нажал. Не важно 1 или 2 или 11.

    Вот что-то начал но дальше…

    form
    input type="text" value="1"
    input type="text" value="2"
    /form

    input name="poga2" type="button" value="L" onclick="q.value = fun()"
    input name="poga3" type="button" value="M"

    script
    function fun() <
    var per1=document.getElementById(‘q’).value;
    var per2=document.getElementById(‘x’).value;

    /script
    Буду очень благодарен за подсказку.
    До свидания.
    NMitra Здравствуйте, пример http://jsfiddle.net/NMitra/dhj7epc4/

    Анонимный Здравствуйте!
    Спасибо Вам за ответ. Спасибо за помощь.
    Анонимный Здравствуйте!
    Подскажите как перебрать список с помощью javascript :
    ul
    li1/li
    li2/li
    li3/li
    li4/li
    li5/li
    li6/li
    li7/li
    /ul

    Ссылка на основную публикацию
    Adblock detector