Как получить имя кнопки типа submit в форме?

Question

tron21 @timofeus91

Junior Frontend Developer

Как получить имя кнопки типа submit в форме?

Всем привет! У меня следующая ситуация. Есть форма, внутри неё две кнопки с типом submit. Их две, потому-что в зависимости от того на какую выполнен клик будет меняться логика. Как в onSubmit формы мне получить данные о том какая именно кнопка была нажата? Я могу кнопке name или id или все вместе повесить, не проблема. Также я не могу отказаться от того чтобы у кнопки был type=submit. Мне нужно чтобы сработало событие формы именно для проверки инпутов браузером. Приложение на React если что. Буду рад любой подсказке!

Ниже мини-пример чтобы было понятно что я имею ввиду

<form onSubmit={(event) => {
  // как получить name или id кнопки, по которой сделано нажатие?
}}>
  <button type="submit" name="buttonFirst" id="1">Button first</button>
  <button type="submit" name="buttonSecond" id="2">Button second</button>
  
</form>

Вопрос задан более года назад
298 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Михаил Р. @Mike_Ro Куратор тега JavaScript

Submit должен быть один. А на сервер должен улетать объект с опциями, которые выбрал пользователь в форме.

Написано более года назад
tron21 @timofeus91 Автор вопроса

Михаил Р., я знаю что так нужно делать в идеале. Но у меня такая ситуация что он не один. Есть две кнопки - одна "сохранить", а другая "сохранить и закрыть" . При нажатии на любую из них должна проходить операция и выполняется дополнительная если нажата определенная. При этом мне нужно что обе были submit для того чтобы отрабатывал required инпутов формы. А так я прекрасно знаю что она должна быть одна в идеале, но у меня слегка другая ситуация. Решение как это исправить я еще не нашел. Если бы нашел как поменять логику, чтобы сохранить весь функционал , то не писал бы этот вопрос.

Написано более года назад
Максим @myks92

А код вы не хотите показать? Может быть у вас форма react-hook-form, а может и простой html.

Написано более года назад
ProjectSoft @ProjectSoft
tron21, вы вообще тесты делали подобной формы?
Судя по вопросу - не делали...
Ни важно, сколько кнопок сабмита будет в форме. На сервер уйдут данные только с той кнопки, которая имеет имя и её кликнули.
Соответственно можно и строить свою логику.

ТЕСТ код. Можете попробовать сами.
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST'): header("Content-type: text/plain; charset=utf8"); print_r($_POST); exit(); endif; ?> <!DOCTYPE html> <html lang="ru"> <head> <title></title> </head> <body> <form action="/" method="post"> <input name="text" type="text"> <input type="submit" name="sbm1" value="Отправить"> <input type="submit" name="sbm2" value="Отправить и закрыть"> </form> </body> </html>
Написано более года назад
tron21 @timofeus91 Автор вопроса

ProjectSoft, а вопрос вы хотите прочитать? Вопрос достаточно корректный и четкий. Как получить name кнопки типа submit? Не на сервере. На фронте. Я не спрашивал уйдут или не уйдут данные и прочее. Мой вопрос достаточно четко написан

Написано более года назад
tron21 @timofeus91 Автор вопроса

Максим, Да, извиняюсь. Обновил вопрос. Мне просто показалось что и без короткого кода понятно.

Написано более года назад

ProjectSoft @ProjectSoft

tron21, ну так в чём дело то?
Я вам дал пояснение, как отловить на сервере. Неужто вы не сможете догадаться, как подобное реализовать на фронте?

const form = document.querySelector('form'),
	submites = [...form.querySelectorAll('input[type=submit]')],
	onClicked = function(e) {
		//e.preventDefault();
		console.log('Click', e.target.name);
		//return !1;
	},
	onSubmites = function(e){
		//e.preventDefault();
		console.log('Submit', e.submitter.name);
		//return !1;
	};
form.addEventListener('submit', onSubmites);
submites.forEach((a, b, c) => {
	a.addEventListener('click', onClicked);
});

Код с лёгкостью подстроите под себя.

Написано более года назад

tron21 @timofeus91 Автор вопроса

ProjectSoft, Вопрос был не про сервер. Я уже реализовал совершенно другим способом посредством клика. А ваша пассивная агрессия здесь не к чему.

Написано более года назад
ProjectSoft @ProjectSoft

tron21, где вы увидели агрессию?
И где вы увидели, что решение основано на клике?
Вам даны только примеры для того, чтобы вы выбросили лишнее и оставили нужное. Это подразумевает что вы будете думать, как лучше реализовать логику вашей задачи. В данной ситуации клик и сабмит. Что происходит первым, а что вторым.
Нужно не искать в словах какую то психологическую нагрузку, а искать смысл, на который вас подталкивают.

Написано более года назад

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

8 комментариев

mozenrat3 @mozenrat3

() (поле)

Написано более года назад
mozenrat3 @mozenrat3

input type = 'hidden'

Написано более года назад
tron21 @timofeus91 Автор вопроса

А как там хранить данные? У меня приложение на React. Если я повешу на кнопку типа submit обработчик onClick, то у меня событие отправки формы просто не отправится, к сожалению. А мне важно чтобы именно событие формы отработало

Написано более года назад
senator @georgi1984

tron21, onSubmit

Написано более года назад
senator @georgi1984

tron21, onSubmit

Написано более года назад
senator @georgi1984

tron21, onclick это не обработчик события submit

Написано более года назад
tron21 @timofeus91 Автор вопроса

senator, вы мой вопрос читали? Вопрос достаточно определенно написан. Как вытащить name или id кнопки по которой был сделан клик? Я знаю разницу между onSubmit и onClick.

Написано более года назад
tron21 @timofeus91 Автор вопроса

mozenrat3, не понял что вы предлагаете. Не могли бы более развернуто объяснить?

Написано более года назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

React

Простой
Zod: Валидация select?
- 1 подписчик
- 8 часов назад
- 40 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 133 просмотра
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 151 просмотр
5

ответов
React

Простой
Как, используя i18next-extract, разделять файлы переводов постранично?
- 1 подписчик
- вчера
- 19 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 47 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

1500 руб./за проект

Телеграм бот

22 нояб. 2024, в 02:56

10000 руб./за проект

Перерисовать логотип в векторе

22 нояб. 2024, в 00:55

500 руб./за проект

Submit должен быть один. А на сервер должен улетать объект с опциями, которые выбрал пользователь в форме.
Михаил Р., я знаю что так нужно делать в идеале. Но у меня такая ситуация что он не один. Есть две кнопки - одна "сохранить", а другая "сохранить и закрыть" . При нажатии на любую из них должна проходить операция и выполняется дополнительная если нажата определенная. При этом мне нужно что обе были submit для того чтобы отрабатывал required инпутов формы. А так я прекрасно знаю что она должна быть одна в идеале, но у меня слегка другая ситуация. Решение как это исправить я еще не нашел. Если бы нашел как поменять логику, чтобы сохранить весь функционал , то не писал бы этот вопрос.
А код вы не хотите показать? Может быть у вас форма react-hook-form, а может и простой html.
tron21, вы вообще тесты делали подобной формы?
Судя по вопросу - не делали...
Ни важно, сколько кнопок сабмита будет в форме. На сервер уйдут данные только с той кнопки, которая имеет имя и её кликнули.
Соответственно можно и строить свою логику.

ТЕСТ код. Можете попробовать сами.
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST'): header("Content-type: text/plain; charset=utf8"); print_r($_POST); exit(); endif; ?> <!DOCTYPE html> <html lang="ru"> <head> <title></title> </head> <body> <form action="/" method="post"> <input name="text" type="text"> <input type="submit" name="sbm1" value="Отправить"> <input type="submit" name="sbm2" value="Отправить и закрыть"> </form> </body> </html>
ProjectSoft, а вопрос вы хотите прочитать? Вопрос достаточно корректный и четкий. Как получить name кнопки типа submit? Не на сервере. На фронте. Я не спрашивал уйдут или не уйдут данные и прочее. Мой вопрос достаточно четко написан
Максим, Да, извиняюсь. Обновил вопрос. Мне просто показалось что и без короткого кода понятно.
tron21, ну так в чём дело то?
Я вам дал пояснение, как отловить на сервере. Неужто вы не сможете догадаться, как подобное реализовать на фронте?

const form = document.querySelector('form'), submites = [...form.querySelectorAll('input[type=submit]')], onClicked = function(e) { //e.preventDefault(); console.log('Click', e.target.name); //return !1; }, onSubmites = function(e){ //e.preventDefault(); console.log('Submit', e.submitter.name); //return !1; }; form.addEventListener('submit', onSubmites); submites.forEach((a, b, c) => { a.addEventListener('click', onClicked); });

Код с лёгкостью подстроите под себя.
ProjectSoft, Вопрос был не про сервер. Я уже реализовал совершенно другим способом посредством клика. А ваша пассивная агрессия здесь не к чему.
tron21, где вы увидели агрессию?
И где вы увидели, что решение основано на клике?
Вам даны только примеры для того, чтобы вы выбросили лишнее и оставили нужное. Это подразумевает что вы будете думать, как лучше реализовать логику вашей задачи. В данной ситуации клик и сабмит. Что происходит первым, а что вторым.
Нужно не искать в словах какую то психологическую нагрузку, а искать смысл, на который вас подталкивают.

Answer 1 · 2023-09-28 02:12:28

FKV @FKV

console.log(event.submitter)

Ответ написан более года назад

2 комментария

Answer 2 · 2023-09-26 17:21:46

Вы можете использовать скрытое поле () в вашей форме для хранения информации о том, какая из кнопок была нажата. Это позволит вам передать это значение на сервер при отправке формы и использовать его для определения логики.

Как получить имя кнопки типа submit в форме?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт