С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Заблокирован

Собрать в объект все имена и значения полей формы

17.11.2024, 05:02. Показов 697. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть в html документе форма, кликаем...

Вопрос в том, как лучше всего собрать имена полей и их значения в один объект. Где имя поля это это ключ в объекте, а содержимое это значение к ключу.

Чекбоксы, select, input, textarea, button. При том, что имена полей могут быть данного формата

Code
1
2
title
submit[add]
И так далее, то есть все возможные варианты... Что то универсально...
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
17.11.2024, 05:02
Ответы с готовыми решениями:

Выбрать все имена и значения от полей ввода
Суть задачи: выбрать все имена и значения от полей ввода: <input * name="(???)" * value="(???)" * Выбирать надо помеченное (???)...

Одни и те же имена у полей формы и БД
Правильно ли решение обозвать поля формы и таблицы в БД одинаковыми именами? Такое решение продиктовано тем, что полей очень много и для...

Создайте функцию, которая будет собирать в объект все значения value у чекбоксов с формы
Задание: Создайте функцию getForm(), которая будет собирать в объект все значения value у чекбоксов с формы, а также проверять их на то,...

10
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,146
Записей в блоге: 14
17.11.2024, 08:53
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form name="form1">
    <input type="text" name="title" value="value1">
    <input type="text" name="submit[add]" value="value2">
    <input type="text" name="submit[edit]" value="value3">
    <button type="submit">Submit</button>
</form>
<script>
    const names = [...document.querySelectorAll("form[name=form1] [name]")]
        .reduce((a,e) => {
            a[e.getAttribute("name")] = e.value;
            return a
        }, {})
    console.log(names)// {title: 'value1', submit[add]: 'value2', submit[edit]: 'value3'}
</script>
1
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
17.11.2024, 12:38
Использовать FormData.
2
Заблокирован
17.11.2024, 19:17  [ТС]
Это понятно, просто создаем массив по каждому типу поля в форме, дале перебираем в цикле и создаем массив...

Я думал, что в js уже предусмотрена такая возможность. Которая просто вытащит весь тот массив палей из формы, как если бы форму отправили к php скрипту... То есть будет все тоже содержать что и $_POST в php
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
17.11.2024, 20:51
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

Цитата Сообщение от Dmit199 Посмотреть сообщение
Я думал, что в js уже предусмотрена такая возможность...
Цитата Сообщение от DrType Посмотреть сообщение
Использовать FormData.
JavaScript
1
new FormData(document.forms[0])
Цитата Сообщение от Dmit199 Посмотреть сообщение
создаем массив по каждому типу поля в форме, дале перебираем в цикле и создаем массив...
JavaScript
1
2
console.log(new Map(new FormData(document.forms[0])));
// Map(3) {'name1' => 'value1', 'name2' => 'value2', 'name3' => 'value3'}
4
 Аватар для voraa
1238 / 1133 / 178
Регистрация: 21.01.2024
Сообщений: 5,151
17.11.2024, 21:01
Цитата Сообщение от Dmit199 Посмотреть сообщение
Которая просто вытащит весь тот массив палей из формы,
Ну не одна строчка, а две. Чего их экономить то
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<form name="form1">
    <input type="text" name="title" value="value1">
    <input type="text" name="submit[add]" value="value2">
    <input type="text" name="submit[edit]" value="value3">
    <button type="submit">Submit</button>
</form>
<script>
    const formdata = new FormData(document.querySelector("form"));
    const names = Object.fromEntries(formdata);
 
    console.log(names)// {title: 'value1', submit[add]: 'value2', submit[edit]: 'value3'}
</script>
</body>
1
Заблокирован
18.11.2024, 03:25  [ТС]
HTML5
1
<button type="submit" name="submit[edit]" value="1839" class="btn">Сохранить</button>
В целом работает и то, что необходимо. Только почему не берет во внимание кнопку, она тоже содержит необходимые данные? Придется в ручную добавлять ее данные в общий массив?
0
Модератор
Эксперт JS
 Аватар для Eva Rosalene
5241 / 2115 / 416
Регистрация: 06.01.2013
Сообщений: 4,846
18.11.2024, 07:17
Цитата Сообщение от Dmit199 Посмотреть сообщение
Только почему не берет во внимание кнопку
А почему должно?

Разбейте так

HTML5
1
2
<input type="hidden" name="submit[edit]" value="1839">
<button type="submit" class="btn">Сохранить</button>
0
 Аватар для voraa
1238 / 1133 / 178
Регистрация: 21.01.2024
Сообщений: 5,151
18.11.2024, 07:33
Цитата Сообщение от Dmit199 Посмотреть сообщение
Только почему не берет во внимание кнопку, она тоже содержит необходимые данные? Придется в ручную добавлять ее данные в общий массив?
Одну кнопку можно и в formdata добавить
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<form name="form1">
    <input type="text" name="title" value="value1">
    <input type="text" name="submit[add]" value="value2">
    <input type="text" name="submit[edit]" value="value3">
    <button type="submit" name="submit[button]" value="1839" class="btn">Сохранить</button>
</form>
<script>
    const form = document.querySelector("form");
    const button = document.querySelector('button');
    const formdata = new FormData(form, button);
    const names = Object.fromEntries(formdata);
    console.log(names)// {title: 'value1', submit[add]: 'value2', submit[edit]: 'value3', 'submit[button]':'1839'}
</script>
</body>
0
Заблокирован
18.11.2024, 11:59  [ТС]
Code
1
submit[add]: 'value2',
Как объект его не разобрать. Какие варианты, для того чтобы добавилось так
Code
1
submit: ['add' => 'value2'],

Придется все же расписывать код?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3809 / 1647 / 428
Регистрация: 14.03.2022
Сообщений: 4,113
18.11.2024, 12:34
Цитата Сообщение от Dmit199 Посмотреть сообщение
чтобы добавилось так
JavaScript
1
submit: ['add' => 'value2'],
Это синтаксис какого ЯП?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
18.11.2024, 12:34
Помогаю со студенческими работами здесь

Можно ли создавать имена полей таблицы из ФОРМЫ?
Можно ли создавть имена полей таблицы из ФОРМЫ???

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

при вызове конструктора присваивания надо возвращать ссыль на объект или сам объект. Смысл? Значения нужных полей меняютмся и без этого!
Друзья! Обнаружил пробел в знаниях. Собсно, вопрос в теме. Дополню лишь: поля объекта меняются на нужные значения и безо всякого возврата...

Перенос значения таблицы в имена полей SQL запрос
Табличка: Перенести значения столбца с названиями предметов в поля в новый запрос. Схема даних:

Как выбрать запись и все значения её полей по максимальному значению одного из полей?
Как выбрать запись и все значения её полей по максимальному значению одного из полей? Код. Форма &quot;фрм_03_03_Студенты_Лент&quot;....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru