JQuery submit, как я могу узнать, какая кнопка отправки нажата?

Я использую плагин ajaxSubmit для отправки форм Ajax, но по какой-то причине этот плагин не отправляет имена/значения input[type=image]. Итак, теперь я поймаю событие отправки, прежде чем ajaxSubmit обработает форму, и мне нужно знать, можно ли узнать, какая кнопка была нажата?

Ответ 1

$("input .button-example").click(function(){
//do something with $(this) var
});

PS: У вас есть jQuery, управляющий $var? В противном случае вы должны сделать это:

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("input .button-example").click(function(){
    //do something with jQuery(this) var
       alert(jQuery(this));
    });
});

если вы не контролируете событие (отправьте форму)

$(document).ready(function(){
    $("#formid").submit(function() {
          alert('Handler for .submit() called.');
          return false;
    });
});

скажите мне что-нибудь, если это сработает;)

Ответ 2

Это будет зависеть от того, какой элемент ввода инициировал submit:

$(document).ready(function() {
    var target = null;
    $('#form :input').focus(function() {
        target = this;
        alert(target);
    });
    $('#form').submit(function() {
        alert(target);
    });
});

Ответ 3

Это то, что я использую (небольшое отклонение от других, используя события mouseup и keyup вместо фокуса):

var submitButton = undefined;
$('#your-form-id').find(':submit').live('mouseup keyup',function(){
    submitButton  = $(this);
});
$('#your-form-id').submit(function() {
    console.log(submitButton.attr('name'));
});

Ответ 4

Ниже я думаю, что это будет более полный пример того, как выполнить то, что вы просили. Вы должны заменить " # ваша форма" на свою форму идентификатора и заменить " кнопка" Один "и" кнопка "Две кнопки" со значениями на ваши кнопки формы.

$(document).ready(function() {
  var target = null;
  $('#your-form-id :input').focus(function() {
    target = $(this).val();
  });
  $('#your-form-id').submit(function() {

    if (target == 'Button One') {
      alert (target);
    }
    else if (target == 'Button Two') {
      alert (target);
    }
  });
});

Ответ 5

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

Я заметил, что ajaxSubmit имеет параметр data, который описывается плагином, делает следующее:

Объект, содержащий дополнительные данные, которые должны быть представлены вместе с форма.

Это именно то, что нам нужно.

Итак, я привязал обработчик кликов к кнопкам отправки и сохранил элемент с помощью jQuery (я предпочитаю этот метод, чем добавление поддельного атрибута):

$('[type="submit"]').live('click', function(e){
        jQuery.data( $(this).parents('form')[0], 'submitTrigger', $(this).attr('name'));
});

И затем в моем вызове ajaxSubmit я построил объект данных и отправил его следующим образом:

function dialogFormSubmit( form ) {
    var data = {}
    data[jQuery.data( form, 'submitTrigger')] = true;
    $(form).ajaxSubmit({ 
        data: data
    });
    return false;
}

Я построил объект данных таким образом, потому что я хотел, чтобы он вел себя так же, как если бы я отправил его с помощью ванильного HTML/PHP (имя ввода - это ключ в массиве $_POST). Я полагаю, что если бы я хотел оставаться верным своему реальному поведению, я бы добавил значение или innerHTML кнопки отправки, но обычно я просто проверяю, установлено ли это так, что это было небрежно:).

Ответ 6

Я нашел это очень полезным. Он охватывает случай нажатия, а также отправки с индексом табуляции и пробелом или ввода. Он захватывает последний вход перед подачей, и что кнопка, которая была отправлена, поэтому вы можете иметь несколько кнопок и проверять каждый в качестве цели, чтобы выполнить что-то уникальное.

$('#form input').live('focusin focusout mouseup', function() {
    // Add a data attribute to the form and save input as last selected
    $('#form').data('lastSelected', $(this));
});
$('#form').submit(function() {
    var last = $(this).data('lastSelected').get(0);
    var target = $('#button').get(0);
    console.log(last);
    console.log(target);
    // Verify if last selected was our target button
    if (last == target) {
        console.log('bingo');
        return false;
    }
});

Ответ 7

$(document).ready(function() {
    var clickedVar = null;
    $('#form :submit').focus(function() {
         clickedVar = $(this).attr("name");
         alert(clickedVar);
    });
});

Ответ 8

Привет, ответ не заставил меня так сильно придраться, чтобы принести альтернативу. То, что я сделаю, будет проверено JS, на которую была нажата кнопка.

<head>
<script>
$('body').click(function(event) {
     var log = $('#log');
     if($(event.target).is('#btn1')) {
        log.html(event.target.id + ' was clicked.');
        return false;
    }else{
        if($(event.target).is('#btn2')) {
           log.html(event.target.id + ' was clicked.');
           return false;
              }
         }
});
</script>
</head>
<body>
   <form id="formulario"  method="post">
      <div id="log"></div>
      <input type="submit" id="btn1" value="Btn 01">
      <input type="submit" id="btn2" value="Btn 02">
  </form>
</body>

Используйте эту страницу, чтобы выполнить тест Test

Saludos