Carduelis
@Carduelis
Web-developer, front-end, js, less

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

У нас есть форма. Отправить данные нужно по 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.
  • Вопрос задан
  • 3881 просмотр
Решения вопроса 1
Hakujin
@Hakujin
Разрабочик
$(document).on('submit', 'form', (e) => {
...
var submitter = $(e.originalEvent.submitter);
...
});

Получаем субмиттера и дальше что хотите делайте.
Лично я обычно просто беру его атрибуты name и value и засовываю в форм-дату. Вот и все
Ответ написан
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
eZhrv
@eZhrv
Growth Hacking, Agile marketing, A/B testing
Возможно, Вам подойдёт этот ответ:
stackoverflow.com/questions/4007942/jquery-seriali...

Поигрался:
https://jsfiddle.net/Lk2j2vmp/3/
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы