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

Вопрос задан 26 сент. 2023
198 просмотров

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

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

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

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

Написано 26 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 26 сент. 2023
Максим @myks92

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

Написано 27 сент. 2023
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>
Написано 27 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 27 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 27 сент. 2023

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);
});

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

Написано 02 окт. 2023

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

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

Написано 02 окт. 2023
ProjectSoft @ProjectSoft

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

Написано 02 окт. 2023

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

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

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

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

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

mozenrat3 @mozenrat3

() (поле)

Написано 26 сент. 2023
mozenrat3 @mozenrat3

input type = 'hidden'

Написано 26 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 26 сент. 2023
senator @georgi1984

tron21, onSubmit

Написано 27 сент. 2023
senator @georgi1984

tron21, onSubmit

Написано 27 сент. 2023
senator @georgi1984

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

Написано 27 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 27 сент. 2023
tron21 @timofeus91 Автор вопроса

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

Написано 27 сент. 2023

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Сложный
Как сделать горизонтальный виртуальный скролл?
- 1 подписчик
- 8 минут назад
- 6 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему падает локальный сервер?
- 1 подписчик
- 4 часа назад
- 59 просмотров
0

ответов
JavaScript

Простой
Отмена дефолтного поведения?
- 1 подписчик
- 4 часа назад
- 63 просмотра
1

ответ
JavaScript

Простой
Как работают фигурные скобки в javascript?
- 1 подписчик
- 5 часов назад
- 91 просмотр
2

ответа
JavaScript

Простой
Почему в консоли выводится 6 и 340?
- 1 подписчик
- 5 часов назад
- 66 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 6 часов назад
- 53 просмотра
1

ответ
JavaScript

+1 ещё

Простой
В чем заключается суть бинарного поиска неотсортированного массива?
- 1 подписчик
- 17 часов назад
- 285 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 17 часов назад
- 34 просмотра
0

ответов
JavaScript

Средний
Почему кнопка постоянно disabled?
- 1 подписчик
- 19 часов назад
- 93 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему нельзя нажать на кнопку третьего элемента в Splide JS?
- 1 подписчик
- вчера
- 74 просмотра
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Помощь с битрикс

30 апр. 2024, в 16:35

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

Интеграция WhatsApp, Instagram и ВКонтакте в наше FastAPI приложение

30 апр. 2024, в 16:21

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

Донастроить Asterisk 20 + FreePBX 17

30 апр. 2024, в 16:03

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

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)

Ответ написан 28 сент. 2023

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

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

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

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

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

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

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