Как получить имя кнопки типа 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>

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

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, не понял что вы предлагаете. Не могли бы более развернуто объяснить?

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

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

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

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

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
React

+1 ещё

Простой
Браузер не обрабатывает запрос get?
- 1 подписчик
- вчера
- 76 просмотров
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 78 просмотров
2

ответа
React

+1 ещё

Простой
Как типизировать хук useState, если в качестве возвращаемым значений у нас ключи объекта?
- 1 подписчик
- вчера
- 77 просмотров
3

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 984 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 206 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

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

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

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

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

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

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 в форме?

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

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

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