Определение нажатой кнопки Submit в одной форме

Быстрый ответ

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

<form action="handler.php" method="post">
  <!-- Здесь могут располагаться скрытые поля формы -->

  <!-- Кнопка для сохранения данных -->
  <button type="submit" name="submitAction" value="save">Сохранить</button>

  <!-- Кнопка для публикации данных -->
  <button type="submit" name="submitAction" value="publish">Опубликовать</button>
</form>

На серверной стороне вы производите проверку значения атрибута submitAction, чтобы понять, какое действие было совершено: "save" или "publish".

Определение действия на сервере

В серверном скрипте (например, в файле handler.php) действие пользователя устанавливается посредством проверки значения submitAction: сохранить данные или их опубликовать.

if ($_POST['submitAction'] == 'save') {
  // Здесь логика сохранения данных формы
} elseif ($_POST['submitAction'] == 'publish') {
  // Здесь логика публикации данных формы
}

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

Ключевые моменты и вариации решений

Использование атрибута formaction для разных действий

Если для каждой кнопки требуется выполнение уникального действия, которое реализуется разными обработчиками, используйте атрибут formaction:

<button type="submit" formaction="save.php">Сохранить</button>
<button type="submit" formaction="publish.php">Опубликовать</button>

Такой подход позволяет направлять данные на соответствующий URL, а также облегчает обработку действий кнопок на стороне сервера.

Подробнее об этом расскажет наш спикер на видео

Выбор между тегами <button> и <input>

Тег <button> признан более универсальным и поддерживает пользовательские настройки, в то время как <input type="submit"> также вполне подходит для использования:

<input type="submit" name="submitAction" value="save" />
<input type="submit" name="submitAction" value="publish" />

Этот выбор определяется требованиями к пользовательскому интерфейсу и соответствующей совместимости с браузерами.

Поддержка устаревших браузеров

Если входит в ваши задачи поддерживать устаревшие браузеры, состояние обратной совместимости можно добавить с помощью JavaScript:

document.getElementById('publishButton').addEventListener('click', function() {
  // Здесь устанавливается путь для отправки данных на publish.php
  this.form.action = 'publish.php';
});

Обход проблем и подводных камней

Особенности использования метода GET

Помните, что при использовании метода GET параметры формы передаются в URL. Это может стать проблемой для конфиденциальных данных.

Проверка неопределённых состояний на сервере

Всегда заложите в скрипт обработку случаев, когда значение submitAction будет отсутствовать или неопределено. Это важно для обеспечения безопасности вашего сервера.

Визуализация

У всех нас есть знакомое представление о системе с двумя ключами, при этом каждый ключ открывает свою дверь:

Ключ 1: 🗝️ (Отправка заказа)
Ключ 2: 🗝️ (Сохранить на будущее)

Применение двух кнопок отправки выглядит как:

<form>
  <button type="submit" name="action" value="submit-order">🗝️ Отправить заказ</button>
  <button type="submit" name="action" value="save-later">🗝️ Сохранить на будущее</button>
</form>

Когда нажимаем 'Отправить заказ':
🗝️ -> 📦 (Заказ отправлен)

Когда нажимаем 'Сохранить на будущее':
🗝️ -> 💾 (Данные сохранены)

У каждой кнопки есть свое уникальное значение value, которое отображает её назначение.

Полезные советы для более комфортной работы

Используйте осмысленные названия кнопок

Давайте кнопкам описательные названия, которые будут говорить сами за себя, облегчая тем самым поддержку кода в долгосрочной перспективе.

Внутренний текст кнопки сможет улучшить взаимодействие с пользователем

Наполните тэг <button> внутренним текстом, который будет направлять пользователя и улучшать взаимодействие с ним.

Методы отправки и защита данных

Выбирать метод отправки данных (GET или POST) следует с учетом требований к безопасности и объему передаваемых данных.

Полезные ссылки

1. Документация по элементу <button> от Mozilla MDN — для закрепления понимания использования нескольких кнопок отправки.
2. Страница на Stack Overflow о двух кнопках отправки в одной форме — для изучения практических рекомендаций и примеров.
3. Обработчики событий в DOM – JavaScript на сайте w3schools — о практике использования событий в JavaScript.
4. Атрибут formaction тега <button> на портале w3schools — для понимания спецификации атрибута formaction.