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

Question

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

Answer 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)); 
    }); 
}); 

если вы wan't управление по событию (отправки формы)

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

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

Answer 2

Это будет поймать какой бы ни вход элемент инициировал представить:

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

Answer 3

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

Answer 4

Ниже я думаю, что это будет более подробный пример того, как выполнить то, что вы просили. Вы должны заменить «# your-form» с вашей формой и заменить «Button One« & «Button Two» со значениями на кнопках формы.

$(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); 
    } 
    }); 
}); 

Answer 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 кнопки отправки, но я обычно просто проверяю, установлено ли это так, что это было неслучайно :).

Answer 6

Это то, что я использую (небольшие вариации на других, используя 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')); 
}); 

Answer 7

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

$('#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; 
    } 
}); 

Answer 8

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

<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