Получить все input html

Как получить весь список данных из всех input?

Возникла нужда подключить калькулятор калорийности на сайте, но тут возникла загвоздка, как теперь получить все данные из заполненных input одним списком. Нужно вывести все указанные ингредиенты в отдельный блок DIV, чтобы каждый ингредиент был разделен запятой. Имеется блок куда добавляется ингредиент, в блоке 3 input, в 1-й мы вводим ингредиент «помидор», во 2-й мы указываем вес «2», а в 3-й единицу измерения «шт». Получается в итоге «Помидор 2 шт». Каждая новая строка с новыми полями для ввода сформирована таким образом:

Соответственно нужно вытащить ингредиенты в таком формате: Допустим у нас имеется 5 ингредиентов, получаем на выходе в новом блоке «Помидор 2 шт, Огурец 1шт, Мука 200 гр, Соль по вкусу, Горошек 1 банка». Нужно чтобы весь получиный список выводился одной строкой. Как это сделать не соображу никак? Потихоньку пытаюсь учить JS, но сложновато пока дается. Прошу у вас помощи. Вот код формирования списков для внесения ингредиентов:

//Поля ингредиентов function addIngredient(group, name, value, unit) < name = name || ''; value = value || ''; unit = unit || ''; var var groupId = group.data('id'); var rowCount = group.find('tr').length; var inputHTML = '' + (rowCount < 0 ? 'Название ингредиента *' : '') + '
' + ' 
' + '
' + '' + '
' + (rowCount >= 2 ? 'x' : '') + ''; group.find('.ingredient-cont').append(inputHTML); > function delIngredient() < $(this).parents('tr').remove(); return false; >function addGroup(name) < name = name || ''; groupsCount++; var var html = '
 
\ 
Для чего ингредиенты Например: Для соуса
][name]" value=""> \
 
'; if (groupsCount == 1) < html = html.replace(/\/, 'Добавить ингредиент'); > else < html = html.replace(/\/, 'Дополнительный список x'); > html = html.replace(/\/g, id); html = html.replace(/\/g, name); return $(html).appendTo('.add-list-box'); > function delGroup() < $(this).parents('.group-wrap').remove(); return false; >$(document).ready(function() < $('.add-list').click(function() < var group = addGroup(); addIngredient(group); addIngredient(group); return false; >); $('div.ingredients') .on('click change', '.ingredient-cont .form-box-ingrid input', function() < $(this).parents('.ingredient-cont').removeClass('has-error'); if ($(this).parents('tr').is(':last-child')) < addIngredient($(this).parents('.group-wrap')); >return false; >) .on('click', '.inp-close', delIngredient) .on('click', '.close-block', delGroup); >); var ingredientsCount = 0; var groupsCount = 0; if (typeof ingredientsList !== 'undefined' && ingredientsList.length) < groupsCount = ingredientsList.length; $.map(ingredientsList, function(data) < var group = addGroup(data['name']); $.map(data['ingredient'], function(ingredient) < addIngredient(group, ingredient['name'], ingredient['value'], ingredient['unit']); >); addIngredient(group); >); > else < // ингредиенты if (!groupsCount) < var group = addGroup(); addIngredient(group); addIngredient(group); >>

/* - Блок добавить ингредиенты- */ .ingredient_box < position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; >.form-box.ingredients < position: relative; margin: 50px 0 20px; padding-bottom: 5px; border-radius: 0; z-index: 1; >.form-box.ingredients::after < z-index: -1; transform: scaleX(1.082); box-sizing: border-box; >@media only screen and (max-width:780px) < .form-box.ingredients::after < transform: scaleX(1.2); >> .form-box.ingredients .add-list-box .form-box-cont < display: flex; align-items: center; padding: 5px 0 10px; >.ingredient_box td:nth-child(2), .form-box-ingrid < flex-grow: 1; >.form-box-ingrid input < width: 100%; >.form-box.ingredients .add-list-box .form-box-inp input < max-width: 70px; width: 100%; margin-left: 10px; >.form-box.ingredients .add-list-box .ingredient-cont_item < display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px 0 20px; >.form-box.ingredients .add-list-box .form-table input < flex-grow: 1; >.ingredient-cont_item .title-Group < padding: 10px 30px 10px 0; >@media only screen and (max-width:480px) < .form-box.ingredients .add-list-box .form-box-inp input < width: 42%; >> .title-Group < padding-right: 30px; line-height: 1.2; font-size: 13px; >.form-box.ingredients .add-list-box .form-table .td-comment < display: block; font-size: 12px; font-style: italic; color: #878787; >.form-box.ingredients .border-header < border-bottom: 1px dotted #c5c5c5; text-align: center; margin: 0 0 25px; >.form-box.ingredients .border-header span < padding: 0 20px; background: #f8f8f8; display: inline-block; bottom: -13px; position: relative; font-size: 17px; >.form-box.ingredients .add-list < display: inline-block; position: relative; color: #2a82c5; font-style: normal; height: 23px; line-height: 21px; background-color: #fff; padding: 5px 10px 2px 26px; font-size: 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px #dadada; -moz-box-shadow: 0 1px #dadada; box-shadow: 0 1px 4px #dadada; >.form-box.ingredients .add-list:before < position: absolute; content: '+'; top: 5px; left: 6px; font-size: 22px; color: #2a82c5; >.form-box.ingredients .add-list:hover < text-decoration: none; color: #d81760; >.form-box.ingredients .close-block < font-style: normal; font-size: 16px; display: inline-block; margin-left: 5px; color: red; >.form-box.ingredients .inp-close

Источник

Как получить 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.19.43538

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

Источник

Получить все инпуты и перебрать

Перебрать массив и получить новый
Есть массив $row, который берет данные из базы $row = sqlsrv_fetch_array( $stmt.

Перебрать все варианты
Допустим, есть строка "000". Нужно перебрать все варианты до "111". Т.е., в данном случае.

Перебрать в цикле все CheckBox-ы
Как перебрать в цикле все CheckBoxs что есть на форме и установить им свойства или получить значения

Сообщение было отмечено noname12345 как решение

Решение

document.getElementsByTagName(`input`)

Qwerty_Wasd, а не подскажешь как получить значение этих форм? Все инпунты получены, количество равно 7, то есть правильно, но у них у всех значение неопределено. Получаю так:

noname12345, для того чтобы получить эти значения, в полях должны быть хоть какие-то данные.
Допустим Вы их ввели, в любом, следующем за логикой, обработчике — можно получить их, просто пробежав по коллекции.

let data = Array.from(document.getElementsByTagName(`input`), e => e.value);

noname12345, смотрю, имена полей в бою пали. Надо бы восстановить, чтобы форма красиво отправилась на сервер.
А вот тип «text» наоборот необязательный. Он по умолчанию.
Если мы не хотим прям сразу отправлять форму, то у кнопки-отправлялки надо явно указать тип «button».

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

 html> head> meta charset="utf-8"> title>БД «Студент»title> link href="styles.css" rel="stylesheet"> head> body> header> h1> БД «Студент» h1> header> nav> input type="button" class="showBD" value="Показать БД" /> nav> div class="container"> form class="form" name="f1"> div class="form__wrapper"> label class="form__item"> ФИО Студента: input class="form__item-input" name="FullName" placeholder="Введите своё ФИО"> label> label class="form__item"> Год рождения: input class="form__item-input" name="YearOfBirth" placeholder="Введите дату рождения"> label> label class="form__item"> Домашний адрес: input class="form__item-input" name="HomeAddress" placeholder="Введите свой адрес проживания"> label> label class="form__item"> Факультет: input class="form__item-input" name="Faculty" placeholder="Введите свой факультет"> label> label class="form__item"> Специальность: input class="form__item-input" name="Specialty" placeholder="Введите свою специальность"> label> label class="form__item"> Курс: input class="form__item-input" name="Course" placeholder="Введите свой курс"> label> label class="form__item"> Учебное заведение: input class="form__item-input" name="lnstitution" placeholder="Введите свой вуз"> label> button class="form__submit" type="button">Отправитьbutton> div> form> div> footer> h3>Сделано в рамках учебной практики JSh3> footer> script src="external.js"> script> body> html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

const showBD = document.querySelector('.showBD'); const mainForm = document.querySelector('.container'); const btnSumbit = document.querySelector('.form__submit'); const formInput = document.querySelectorAll('.form__item-input'); // Была забыта точка в селекторе showBD.addEventListener("click", () => { if (mainForm.style.display !== 'none') { mainForm.style.display = 'none'; showBD.value = "Показать форму"; } else { mainForm.style.display = ''; // Стереть в атрибуте none, стиль будет браться из внешнего файла showBD.value = "Показать БД"; } }) btnSumbit.addEventListener("click", async () => { // event.preventDefault(); для типа кнопки "button" уже не нужно preventDefault() // ЗДЕСЬ ВАЛИДАЦИЯ. Если не прошла, то выскочить без продолжения let form = document.forms[0]; // Выбрали форму let data = new FormData(form); // Подготовили данные для отправки в формате multipart/form-data try { let response = await fetch("test.php", { method: "POST", body: data }); if (response.ok) { alert("Отправлено"); } else { alert(`${response.status}: ${response.statusText}`); } } catch (e) { alert(e.message); } });

Источник

JavaScript | Как получить данные из input (HTML-элемента)?

Предположим, что у нас есть элемент body с одним элементом input внутри:

Выглядит в браузере это таким образом:

Как нам получить строку « Текст в инпуте » из разметки страницы при помощи JavaScript?

Видео

Шаг № 1 — Получение всех элементов input на странице

Вводим в консоль браузера команду:

document.getElementsByTagName("input")

Она вернёт нам объект класса HTMLCollection. Это «почти» массив из объектов элементов HTML-разметки.

Шаг № 2 — Получение нужного нам элемента input

Т. к. у нас всего один input на странице, то нам нужно получить первый элемент «почти»-массива.

document.getElementsByTagName("input")[0]

Эта команда вернёт нам один единственный input со страницы. Теперь мы знаем как к нему обращаться.

Шаг № 3 — Получение значения из атрибута value у нужного нам элемента input

Наш input имеет тип « text «. То есть это простое текстовое поле в которое пользователь может вводить символы. В любой момент времени из этого поля можно получить данные, которые в нём записанты.

Для этого нужно получить значение атрибута value у нужного нам элемента input. В случае объектов JavaScript, value будет свойством объекта.

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

Данная команда вернёт нам искомую строку

Информационные ссылки

Стандарт HTML — Раздел «4.10.5 The input element» — https://html.spec.whatwg.org/#the-input-element

Стандарт HTML — Раздел «The value content attribute» — https://html.spec.whatwg.org/#attr-input-value

Стандарт DOM — Раздел «4.5. Interface Document » — https://dom.spec.whatwg.org/#interface-document

Стандарт DOM — Раздел «The getElementsByTagName( qualifiedName ) method» — https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

Вам также может понравиться

document.getElementsByTagName(«figure»)

Команда document.getElementsByTagName(«figure») возвращает HTML-коллекцию HTML-элементов со страницы (документа). Элементы коллекции тянут за собой всех потомков. Забор данных осуществляется в древовидном порядке, […]

Fetch | Заголовки

Версия документа от 08 ноября 2021 года. Может измениться в будущем. Список заголовков (Header list) — это список из нуля или […]

document.getElementsByTagName(«hgroup»)

Команда document.getElementsByTagName(«hgroup») возвращает HTML-коллекцию HTML-элементов со страницы (документа). Элементы коллекции тянут за собой всех потомков. Забор данных осуществляется в древовидном порядке, […]

ECMAScript | Условный оператор (Conditional Operator ? : )

Синтаксис условного оператора ConditionalExpression [In, Yield, Await] : ShortCircuitExpression [?In, ?Yield, ?Await] ShortCircuitExpression [?In, ?Yield, ?Await] ? AssignmentExpression [+In, ?Yield, ?Await] : AssignmentExpression [?In, ?Yield, ?Await] […]

Источник