Get html input value with javascript

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

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

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

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

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

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

Читайте также: Hello world using python

И чтобы мы могли увидеть, что мы получили из 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 , чему и была посвящена полностью данная страница!

Источник

Input Text value Property

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script).

Browser Support

Syntax

Return the value property:

Property Values

Technical Details

More Examples

Example

Get the value of a text field:

Example

var at = document.getElementById(«email»).value.indexOf(«@»);
var age = document.getElementById(«age»).value;
var fname = document.getElementById(«fname»).value;
submitOK = «true»;

if (fname.length > 10) alert(«The name may have no more than 10 characters»);
submitOK = «false»;
>

if (isNaN(age) || age < 1 || age >100) alert(«The age must be a number between 1 and 100»);
submitOK = «false»;
>

if (at == -1) alert(«Not a valid e-mail!»);
submitOK = «false»;
>

if (submitOK == «false») return false;
>

Example

var mylist = document.getElementById(«myList»);
document.getElementById(«favorite»).value = mylist.options[mylist.selectedIndex].text;

Example

var no = document.getElementById(«no»);
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById(«result»).value;
txt = txt + option;
document.getElementById(«result»).value = txt;

Example

An example that shows the difference between the defaultValue and value property:

Источник

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:

 var lolz; function onload() < lolz = document.getElementById('lolz'); >function kk()

Note the onload attribute of the tag. (On a side note: the language attribute of the 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.

Источник

How to get the value from an input box

I have this piece of code and I am not sure how to get the value from an input box. This is my html code:

function login(name, password)< alert('Your username is ' + name + ' and your password is ' + password); >;

There are n number of ways to get the value from input. Liek getting from id or by class or by many other ways. Before asking question , it doesn’t hurt to do some research on our own. This is very basic and you can easily grasp the basics from w3schools.com or mozilla mdn for more detailed understanding. 🙂

There must be hundreds of Javascript tutorials that explain how to get input values. THis question demonstrates absolutely no attempt to learn on your own.

8 Answers 8

Edited: thanks to @sajalsuraj

 User 
Password  
 function login()< var name = document.getElementById('username').value; var password = document.getElementById('password').value; alert('Your username is ' + name + ' and your password is ' + password); >;

This won’t work because name and password variable value are initialized when the page loads and the name and password value will be blank, so you have to initialize these variables inside login function.

Modifying @smoqadam answer,

function login(name, password)< alert('Your username is ' + name + ' and your password is ' + password); >; name = document.getElementById('username').value; password = document.getElementById('password').value; login(name,password);

I would recommend not to bind to events this way. Here’s a better example of the bare minimum you are trying to do. I would also suggest using native html form functionality. Consider reading this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

// add event listener to loginButton with handler, that will get username and password from html document.getElementById('loginButton').addEventListener('click', function() < var username = document.getElementById('username').value; var password = document.getElementById('password').value; login(username, password); >); // function to process login. function login (username, password)

Источник