Javascript get values from input

How to Get the Value of Text Input Field Using JavaScript

In this tutorial, you will learn about getting the value of the text input field using JavaScript. There are several methods are used to get an input textbox value without wrapping the input element inside a form element. Let’s show you each of them separately and point the differences.

The first method uses document.getElementById(‘textboxId’).value to get the value of the box:

document.getElementById("inputId").value;

html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementById("inputId").value; // Displaying the value alert(inputVal); > script> body> html>

You can also use the document.getElementsByClassName(‘className’)[wholeNumber].value method which returns a Live HTMLCollection. HTMLCollection is a set of HTM/XML elements:

document.getElementsByClassName("inputClass")[0].value;

html> html> head> title>Title of the Document title> head> body> input type="text" placeholder="Type " id="inputId" class="inputClass"> button type="button" onclick="getInputValue();">Get Value button> script> function getInputValue( ) < // Selecting the input element and get its value let inputVal = document.getElementsByClassName("inputClass")[0].value; // Displaying the value alert(inputVal); > script> body> html>

Or you can use document.getElementsByTagName(‘tagName’)[wholeNumber].value which is also returns a Live HTMLCollection:

document.getElementsByTagName("input")[0].value;

Live HTMLCollection only includes the matching elements (e.g. class name or tag name) and does not include text nodes.

Another method is document.getElementsByName(‘name’)[wholeNumber].value which returns a live NodeList which is a collection of nodes. It includes any HTM/XML element, and text content of a element:

document.getElementsByName("searchText")[0].value;

Use the powerful document.querySelector(‘selector’).value which uses a CSS selector to select the element:

document.querySelector('#searchText').value; // selected by id document.querySelector('.search_Field').value; // selected by class document.querySelector('input').value; // selected by tagname document.querySelector('[name="searchText"]').value; // selected by name

There is another method document.querySelectorAll(‘selector’)[wholeNumber].value which is the same as the preceding method, but returns all elements with that selector as a static Nodelist:

document.querySelectorAll('#searchText')[0].value; // selected by id document.querySelectorAll('.search_Field')[0].value; // selected by class document.querySelectorAll('input')[0].value; // selected by tagname document.querySelectorAll('[name="searchText"]')[0].value; // selected by name

Nodelist and HTMLCollection

The HTMLCollection represents a generic collection of elements in document order suggesting methods and properties to select from the list. The HTMLCollection in the HTML DOM is live, meaning when the document is changed it will be automatically updated. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. It is static when any change in the DOM does not affect the content of the collection. And live when the changes in the DOM automatically update the collection. You can loop over the items in a NodeList using a for loop. Using for. in or for each. in is not recommended.

Источник

How to Get an Input’s Value with JavaScript

There are many types of input fields, and while getting their value is done similarly in each case, it requires some thought to do well.

Get the value of a text input

Here is a basic example. It creates a text input field, then prints the contents to the console

The input’s value will be printed to the console when the getVal() function is invoked.

Every input can receive an attribute that establishes a “call to action” – in other words, an event that triggers the execution of a function.

In the above example, we use the DOM event onblur to make calls to our event handler function.

Each type of input will require different events to trigger the handler function – that’s the part of retrieving input from the user that requires some thinking. On top of this, multiple events can be used with the same input. Understanding when these events are triggered, and how they interact with your input field, is the key to getting your event handlers working properly.

The onblur event triggers the getVal() function once the field loses focus (i.e. the user navigates away from the field).

Not every event suits every purpose. If, for example, you are working with an input that supports a search mechanism, and the event handler should be triggered each time the data changes, you will want to use the oninput event. With oninput , every character the user types (or deletes) will trigger the getVal() function, causing the field’s contents to be printed to the console. For example, if you were typing the word “dog”, you would see “d”, then “do”, then finally “dog” in the console output.

Event Handler Syntax and Notes

Working with event handlers properly requires effort at both the DOM level and at the Script level.

1. DOM level:

a. Make sure that the DOM element has an event attribute that triggers your event handler function.

b. Make sure that the DOM event you’ve chosen is the right choice for your input.

Syntax

To specify your event handler, add it as an attribute on the element using the following format:

DOMevent=”funcName()”

2. Script level:

At the script level, simply define your handler function:

Find an HTML element

Event handlers often require that you find the HTML element being modified as the first step.

There are several ways to do so – mainly by using different DOM queries.

In the text input field example above, we used document.querySelector(‘input’) to find the input field being modified. This query returns the first input. If there are several input fields, this simple query will not work well – you’ll want to use a more specific DOM query in that case.

For most input types, the .value attribute will prove useful in getting the field’s value. Some inputs, however, require different attributes – for example, the checkbox input type does not use the .value attribute (more on this below).

Every input has a type. This type determines what the input element looks like when it is rendered on the page, If the input is of type text, a text field is shown on the browser. If the input is of type checkbox, a checkbox appears.

Get the value of input type checkbox

As mentioned above, retrieving the value of a checkbox field is slightly different from other input field types. Take the following example, which creates a checkbox in the browser window and assigns a handler to the DOM event onchange :

In the above example the triggering DOM event is onchange . This means that whenever a change is made to the input, the handler function getChecked is called. This is a frequently used event trigger for input fields.

The DOM query was done using document.getElementById(‘_id_‘), which queries the document for elements with a matching id attribute. An element’s Id is unique. Finding elements by Id ensures that you will only get a single element back. Using ids is costly, though – it is better to search by classname .

To search by class name, use document.getElementsByClassName(“_className_”)[idx]. This will retrieve all elements that have the associated classname value, so it is important to ensure that only one element with the requested class name exists. The getElementsByClassName() selector returns an array, which means you need to pull the input field from the returned array – hence the [idx].

To retrieve the value of a checkbox, use the checked attribute. The checked attribute returns true or false based on the contents of the input field.

Related Articles:

Источник

Javascript get values from input

Если(например) у тега input есть атрибут name, то мы можем обратиться к тегу через атрибут name с помощью querySelector.

Что нужно для получения данных из value с помощью javascript

Нам потребуется тег input и внутрь поместим атрибут name

В данном случае, чтобы в живую показать, как будет происходить получение данных из input нам потребуется onclick.

На кнопку button повесим onclick с функцией

И уже в скрипте получим данные из value с помощью querySelector

И чтобы мы могли увидеть, что мы получили из input выведем через alert

Код для получения 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

Чтобы получить данные в алерт нажмите кнопку !

Как получить значение value input через Id без функции

Можно ли получить значение input через Id без функции ?! Легко!

Берем выше идущий код, и вместо вот этого : document.getElementById(» name_id «).value пишем просто : name_id .value

Результат обращения и получения значения value из input без функции

Как получить значение value input через getElementsByClassName

Предположим, что у инпутаinput кроме класса нет ничего, и нам требуется обратиться к данному value через класс!

Конечно же мы можем обратиться к данному инпуту с помощью getElementsByClassName

Скопируем выше идущий код, добавим уже не ид, а класс(example). Как вы наверное знаете, что getElementsByClassName получает HTMLCollection и поэтому, нам нужно поставить квадратные скобки и указать порядковый номер данного инпута с этим классом — это у нас первый, поэтому ставим 0

Пример получения значения value input через getElementsByClassName

Как получить значение value input через getElementsByName

Что касается имени name мы уже к нему обращались, но не использовали getElementsByName , а это функция может обращаться к имени, поэтому скопируем выше идущий код и класс поменяем на name(example). И getElementsByName получает HTMLCollection и поэтому, нам нужно поставить квадратные скобки и указать порядковый номер данного инпута с этим именем — если вы помните, то name(example) мы уже использовали чуть выше в способе получения value через querySelector и этот элемент с name второй, то ставим 1(0 — это первый, 1 — это второй), естественно заменяем название функции.

Пример получения значения value input через getElementsByName

Как получить значение value input в переменную

Для того, чтобы получить значение value input в переменную, то вам всего-то навсего нужно взять выше описанные способы получения value значения из input и поставить вместо alert , какую-то переменную и вот ваше значение уже внутри переменной!

Что вам потребуется, для того, чтобы получить значение 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 к тегу js«. Ответ: ничего привязывать никуда не нужно!

Нужно просто взять и получить данные из input , чему и была посвящена полностью данная страница!

Источник