Как определить нажатую кнопку по событию submit?

Question

[Павел]

У нас есть форма. Отправить данные нужно по ajax. Соответственно, правильным способом является вешание обработчика на собтие submit, предотвращая стандартное поведение браузера (отправить и обновить страницу).
Проблема в том, что когда мы отправляем данные на сервер без ajax,

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

На сервер передастся значение value той кнопки, что мы нажали.
А вот по событию submit, почему-то не получается найти нажатую кнопку.
Конечно, можно добавить еще одно событие, повесить обработчик на контейнер формы и отслеживать делегированием, но как так-то?
UPD
Суть в том, что мы вешаем один обработчик на одно событие. И это событие - submit, а не click. Мой вопрос сводится к тому, что если мы не стопаем дефолтное поведение submit, мы НЕ можем поймать нажатую кнопку.
Когда же все просиходит без js, сервер МОЖЕТ распознать нажатую кнопку.
Отсюда я сделал вывод, что наверняка, каким-то образом можно распознать нажатую кнопку в форме по событию submit.

Answer 1

[Алексей Хворостов]

$(document).on('submit', 'form', (e) => {
...
var submitter = $(e.originalEvent.submitter);
...
});

Получаем субмиттера и дальше что хотите делайте.
Лично я обычно просто беру его атрибуты name и value и засовываю в форм-дату. Вот и все

Answer 2

[eskanderdon]

Знаю, знаю.. сто лет в обед.. но может быть какой-нибудь сёрфер оценит (не знаю)...

<script type="text/javascript">
$(function () {
   var target = null;
    $(':input').focus(function() {
      target = $(this).val();
    });
    // НЕ ПЕРЕНОСИТЕ ЭТОТ ФРАГМЕНТ В SUBMIT
 
  $('form').submit( function () {
    
    if ( target == 'save' ) {
      alert('[Save] is pressed')
    } else if ( target == 'delete' ){
      alert('[Delete] is pressed')
    } else {
      alert('{unknown button is pressed}')
    }
     return false;
  });
});
</script>

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

Comments

[levkoi]

Спасибо, оценили)

[SunUp]

Добавлю сюда ещё вариант покрасивее

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

<script>
  document.getElementsByTagName('form')[0].addEventListener('submit', event => {
    event.preventDefault();
    if (event.submitter.value) == 'save') {
      alert('Save');
    } else if (event.submitter.value) == 'delete') {
      alert('Delete');
    }
    return false;
  });
</script>

Answer 3

[Evgeniy]

Возможно, Вам подойдёт этот ответ:
stackoverflow.com/questions/4007942/jquery-seriali...

Поигрался:
https://jsfiddle.net/Lk2j2vmp/3/

Comments

[Артур]

люди скоро думать перестанут)

[Павел]

К сожалению, ваш приведенный пример не удовлетворяет условию в вопросе. Суть в том, что мы вешаем один обработчик на одно событие. И это событие - submit, а не click. Мой вопрос сводится к тому, что если мы не стопаем дефолтное поведение submit, мы НЕ можем поймать нажатую кнопку, когда же все просиходит без js, сервер МОЖЕТ распознать нажатую кнопку.
Отсюда я сделал вывод, что наверняка, каким-то образом можно распознать нажатую кнопку в форме по событию submit.

[eskanderdon]

интересует ответ на вопрос в теме: чем дело кончилось?

[Павел]

eskanderdon, ничем. Перешли на событие `onclick`. Возможно, решением является объект `event.submitter`. Как написали в комментарию к костылю в соседнем вопросе.