jQuery: как узнать, какая кнопка была нажата при отправке формы? - PullRequest
Новая
       22

jQuery: как узнать, какая кнопка была нажата при отправке формы?

207 голосов
/ 19 апреля 2011

У меня есть событие .submit(), настроенное для отправки формы.У меня также есть несколько форм на странице, но только один здесь для этого примера.Я хотел бы знать, какая кнопка отправки была нажата без применения события .click() к каждому.

Вот настройка: 

<html>
<head>
  <title>jQuery research: forms</title>
  <script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
  <script type='text/javascript' language='javascript'>
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
  <input type='hidden' name='data' value='blahdatayadda' />
  <input type='submit' name='name1' value='value1' />
  <input type='submit' name='name2' value='value2' />
</form>
</body>
</html>

Пример в реальном времени на jsfiddle

Помимо применения события .click () к каждой кнопке, есть ли способ определить, какая кнопка отправки была нажата?

Ответы [ 23 ]

220 голосов
/ 19 апреля 2011

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

Я закончил тем, что придумал это решение, и оно работало довольно хорошо: 

$(document).ready(function() {
    $("form").submit(function() { 
        var val = $("input[type=submit][clicked=true]").val();
        // DO WORK
    });
    $("form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

В вашем случае с несколькими формами вам, возможно, придется немного подправить, но это все равно должно применяться

82 голосов
/ 19 февраля 2014

Я обнаружил, что это работает. 

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}
59 голосов
/ 24 февраля 2015

Это работает для меня: 

$("form").submit(function() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}
42 голосов
/ 21 октября 2015

При отправке формы:

  • document.activeElement выдаст вам кнопку отправки, на которую нажали.

  • document.activeElement.getAttribute('value')дать вам значение этой кнопки.

27 голосов
/ 29 июля 2011

Вот подход, который кажется более чистым для моих целей.

Во-первых, для любой и всех форм: 

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

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

Затем, в $ ('form'). Submit (), вы можете узнать, что было нажато в последний раз, например, 

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
13 голосов
/ 23 февраля 2014

Ого, некоторые решения могут быть сложными! Если вы не возражаете против использования простого глобального, просто воспользуйтесь тем фактом, что событие нажатия кнопки ввода срабатывает первым. Далее можно отфильтровать селектор $ ('input') для одной из многих форм, используя $ ('# myForm input'). 

    $(document).ready(function(){
      var clkBtn = "";
      $('input[type="submit"]').click(function(evt) {
        clkBtn = evt.target.id;
      });

      $("#myForm").submit(function(evt) {
        var btnID = clkBtn;
        alert("form submitted; button id=" + btnID);
      });
    });
7 голосов
/ 29 ноября 2016

Я нашел лучшее решение: 

$(document.activeElement).attr('id')

Это не только работает на входах, но и на тегах кнопок.Также он получает идентификатор кнопки.

6 голосов
/ 05 мая 2014

Опираясь на то, что сделали Стэн и Янн-ч, но по умолчанию используется первая кнопка. Прелесть этого общего подхода заключается в том, что он улавливает как щелчок, так и клавишу ввода (даже если фокус был не на кнопке. Если вам нужно разрешить ввод в форме, просто ответьте на это, когда кнопка сфокусирована ( т. е. ответ Стэна). В моем случае я хотел разрешить вводу отправлять форму, даже если текущий фокус пользователя был на текстовом поле.

Я также использовал атрибут 'name' вместо 'id', но это тот же подход. 

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;
6 голосов
/ 30 июня 2013

Другое возможное решение - добавить скрытое поле в форму: 

<input type="hidden" id="btaction"/>

Затем в функцию готовности добавьте функции для записи нажатой клавиши: 

$('form#myForm #btnSubmit').click(function() {
    $('form#myForm #btaction').val(0);
});

$('form#myForm #btnSubmitAndSend').click(function() {
    $('form#myForm #btaction').val(1);
});

$('form#myForm #btnDelete').click(function() {
    $('form#myForm #btaction').val(2);
});

Теперь в обработчике submition формы прочитайте скрытую переменную и решите на ее основе: 

var act = $('form#myForm #btaction').val();
4 голосов
/ 19 апреля 2011

Если вы не имеете в виду, что не добавляете событие .click, что вы не хотите иметь отдельные обработчики для этих событий, вы можете обрабатывать все клики (отправки) в одной функции: 

$(document).ready(function(){
  $('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});

function process_form_submission( event ) {
  event.preventDefault();
  //var target = $(event.target);
  var input = $(event.currentTarget);
  var which_button = event.currentTarget.value;
  var data = input.parents("form")[0].data.value;
//  var which_button = '?';       // <-- this is what I want to know
  alert( 'data: ' + data + ', button: ' + which_button );
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...