Определение нажатой кнопки Submit без jQuery: чистый JavaScript

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

Вы можете определить, какая кнопка была нажата (или извлечь скрытую информацию), присвоив кнопке уникальный обработчик события onclick, который будет обновлять значение скрытого поля формы перед её отправкой.

<form id="oh-so-fancy-form" onsubmit="return secretAgent();">
    <input type="hidden" id="secret-message" name="action" value="">
    <button type="submit" onclick="document.getElementById('secret-message').value='save'">Сохранить</button>
    <button type="submit" onclick="document.getElementById('secret-message').value='delete'">Удалить</button>
</form>

При отправке формы значение поля 'secret-message' покажет, какая кнопка была активирована ('save' или 'delete'). Для реализации этого способа вам не потребуются дополнительные инструменты.

Использование события onSubmit

Как правильно реализовать эту задачу? Вам понадобится надежный обработчик события onSubmit.

function secretAgent() {
    var missionCode = document.getElementById('secret-message').value;
    alert('Код операции: ' + missionCode);
    // Производится анализ задания
    return false; // Изящный трюк: "Я не оставляю следов."
}

Эта функция даст нам возможность определить действия до отправки данных формы.

Определение клика по кнопке

Обработчики клика: ваш секретный инструментарий

Обработчики клика можно представить как потайные рычаги, которые улавливают информацию о каждом нажатии кнопки.

var lastButtonClicked;

// Обработчик в виде потайного рычага
function grappleHook(value) {
  lastButtonClicked = value;
  document.getElementById('secret-message').value = value;
}

Эти обработчики можно легко "запустить" с любой кнопки, передав им уникальный идентификатор:

<button type="submit" onclick="grappleHook('save')">Сохранить</button>
<button type="submit" onclick="grappleHook('delete')">Удалить</button>

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

Кроссбраузерность: подобно международным стандартам

Как и при работе с разными языками и стандартами, важно удостовериться, что ваш код исправно работает во всех браузерах. Поэтому каждое решение стоит проверять в разных браузерах.

Доступ к элементам формы: важно все контролировать

Имея карточку-пропуск — информацию о форме по её уникальному идентификатору — вы всегда будете в курсе происходящего:

var fancyForm = document.getElementById('myForm');

Такой подход дает уверенность в написании кода.

Сохранение исходного HTML: изящество и незаметность

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

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

Представьте HTML-форму как управляющий пульт с множеством функциональных кнопок:

Управляющий пульт 🎮
      [Сохранить]             [Удалить]
            💾                          ❌

Когда оператор (пользователь) выбирает команду (нажимает кнопку), пульт (форма) распознает команду:

function interpretCommand(event) {
    // Принята команда: [Сохранить] или [Удалить].
    const receivedCommand = event.submitter ? event.submitter.id : 'save';
    console.log(`Команда '${receivedCommand}' принята.`);
}

Активация команды вызывает соответствующую реакцию пульта (формы):

🎮 Реакция:
- 💾: "Команда 'Сохранить' принята."
- ❌: "Команда 'Удалить' принята."

Действия выполняются в соответствии с выбором операции! ✨

Еще один способ идентификации: использование уникальных имен для кнопок

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

<button name="action" value="save" type="submit">Сохранить</button>
<button name="action" value="delete" type="submit">Удалить</button>

Команду, прошедшую через форму, можно определить внутри события onSubmit, даже если конкретное действие не было указано явно:

function secretAgent(event) {
    var commandReceived = this.action.value || 'save'; // По умолчанию – 'Сохранить'
    console.log('Полученная команда:', commandReceived);
    return false; // "Моя задача – не отправлять форму."
}

Обработка ответов формы с применением стиля

Применение Promise и асинхронных функций в JavaScript сравнимо с вызовом элитных агентов для выполнения задач после обработки данных:

async function eliteFormAgent(event) {
    // Здесь выполняются секретные операции
    const response = await fetch('/submit', {
        method: 'POST',
        body: new FormData(event.target),
    });

    // Инструкции по действиям: обработка ответа
    const result = await response.json();
    console.log('Ответ штаба:', result.message);
}

Распространённые проблемы или испытания в шпионской операции

Вы должны быть готовы к следующим ситуациям (элементы шпионского боевика):

1. Синхронность: Убедитесь, что значение 'secret-message' устанавливается до события onSubmit.
2. Всплытие событий: Проверьте, что клик по кнопке также инициирует событие onSubmit формы.
3. Доступность формы: Обеспечьте легкий доступ ко всем кнопкам формы, в том числе для пользователей, использующих клавиатуру.

Полезные материалы

1. HTMLFormElement: метод submit() – Веб-API | MDN — познакомьтесь с особенностями метода submit() в HTML-формах.
2. HTML атрибут события onsubmit — разберитесь в использовании атрибута onSubmit в HTML-формах.
3. W3Schools Tryit Редактор — поэкспериментируйте на тренировочной площадке Редактора Tryit.
4. Получение значений HTML-формы – Stack Overflow — научитесь извлекать значения форм.
5. Объект FormData – Веб-API | MDN — освойте работу с объектом FormData для выполнения ваших задач.