Javascript все элементы input

How to loop through elements of forms with JavaScript?

How can I loop over the input elements in the form (in order to perform some validation on them)? I’d prefer to use only pure JavaScript, not jQuery or another library. I’d also like to limit the iteration to form elements, not any other elements which may be added to the form.

@DanDascalescu As you can see in the HTML, these form field doesn’t have different names. Thus, it is not duplicate.

7 Answers 7

A modern ES6 approach. The form has a property elements which is a reference to all the input elements. Select the form with any method you like. Use the spread operator to convert the HTMLFormControlsCollection to an Array. Then the forEach method is available. For example [. form.elements].forEach

Update: Array.from is a nicer alternative to the spread operator Array.from(form.elements) it’s slightly clearer behaviour.

An example below iterates over every input in the form.

You can filter out input types with the type property formInputs.filter((input) => input.type !== «submit»)

const forms = document.querySelectorAll('form'); const form = forms[0]; Array.from(form.elements).forEach((input) => < console.log(input); >);

 
Input Form Selection
 
 Foo  Password  Foo  Ts & Cs  
 

You need to get a reference of your form, and after that you can iterate the elements collection. So, assuming for instance:

You will have something like:

var elements = document.getElementById("my-form").elements; for (var i = 0, element; element = elements[i++];)

Notice that in browser that would support querySelectorAll you can also do something like:

var elements = document.querySelectorAll("#my-form input[type=text][value='']") 

And you will have in elements just the element that have an empty value attribute. Notice however that if the value is changed by the user, the attribute will be remain the same, so this code is only to filter by attribute not by the object’s property. Of course, you can also mix the two solution:

var elements = document.querySelectorAll("#my-form input[type=text]") for (var i = 0, element; element = elements[i++];)

You will basically save one check.

Источник

Javascript все элементы input

Last updated: Jan 12, 2023
Reading time · 3 min

# Table of Contents

# Get all of a Form’s elements using JavaScript

To get all the elements in a form:

1. Select the form element.
2. Use the elements property to get a collection of the form’s elements.
3. Optionally, convert the collection to an array using the Array.from() method.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> form id="my-form"> input type="text" id="first_name" name="first_name" /> input type="text" id="last_name" name="last_name" /> textarea id="message" name="message" rows="5" cols="30">textarea> input type="submit" value="Submit" /> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const form = document.getElementById('my-form'); // ✅ Get all form elements const formElements = Array.from(form.elements); formElements.forEach(element =>  console.log(element); >); console.log('--------------------------'); // ✅ Get only the input elements in a form const onlyInputs = document.querySelectorAll('#my-form input'); onlyInputs.forEach(input =>  console.log(input); >); 

We selected the form element using the document.getElementById() method.

Copied! 
const form = document.getElementById('my-form'); 

The elements property on the form returns a collection containing all of the form controls.

Copied! 
const form = document.getElementById('my-form'); // ✅ Get all form elements const formElements = Array.from(form.elements); 

Источник

Как получить value всех input-ов?

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

$('.total').find('.hidden-grand-total').each(function(i) < console.log($('.total').find('.hidden-grand-total').val()); >); 

3 ответа 3

UPD Не заметил сразу, что нужна сумма значений. Исправляюсь:

let sum = $('.total').get().reduce(function(p, c) < return +$('.hidden-grand-total', c).val() + p; >, 0); console.log(sum);

Сделал вариант с суммированием значений.

var sum = 0; $('.total').find('.hidden-grand-total').each(function() < sum = sum + parseInt($(this).val()); >); console.log(sum);

var inputGrand = document.querySelectorAll('.hidden-grand-total'); var inputGrandSum = 0; for(var i = 0; i < inputGrand.length; i++)< inputGrandSum += parseFloat(inputGrand[i].value); >console.log(inputGrandSum); document.querySelector('.result').innerHTML = 'Сумма ' + inputGrandSum;

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.21.43541

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

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

На этом уроке мы научимся получать значения, введенные пользователями в поле 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().

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

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

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

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

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

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

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

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

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

Михаил Русаков

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

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

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

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

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

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

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

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

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

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

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

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

Источник