我有一个.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()事件外,有没有办法确定哪个提交按钮被单击了?


当前回答

这个方法对我很管用

$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);

}

其他回答

如果你不添加.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 );
}

下面的方法似乎更符合我的目的。

首先,对于任何形式:

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

当为表单触发此单击事件时,它只是记录稍后要访问的原始目标(在事件对象中可用)。这是一个相当宽泛的描边,因为它将在表单上的任何地方触发任何单击。欢迎提供优化评论,但我怀疑它永远不会引起明显的问题。

然后,在$('form').submit()中,您可以查询上次点击的内容,例如

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

由于我不能对已接受的答案进行评论,我在这里带来了一个修改后的版本,它应该考虑到表单之外的元素(即:使用form属性附加到表单上)。这是针对现代浏览器的:http://caniuse.com/#feat=form-attribute。最接近的('form')被用作不支持的form属性的回退

$(document).on('click', '[type=submit]', function() {
    var form = $(this).prop('form') || $(this).closest('form')[0];
    $(form.elements).filter('[type=submit]').removeAttr('clicked')
    $(this).attr('clicked', true);
});

$('form').on('submit', function() {
    var submitter = $(this.elements).filter('[clicked]');
})

使用这个出色的答案,您可以检查活动元素(按钮),将隐藏输入附加到表单,并可选地在提交处理程序的末尾删除它。

$('form.form-js').submit(function(event){
    var frm = $(this);
    var btn = $(document.activeElement);
    if(
        btn.length &&
        frm.has(btn) &&
        btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
        btn.is('[name]')
    ){
        frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
    }

    // Handle the form submit here

    $('#form-js-temp').remove();
});

附注:我个人在所有通过JavaScript提交的表单上添加了form-js类。

你可以创建input type="hidden"作为按钮id信息的holder。

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

在这种情况下,表单在提交时传递值“1”(按钮的id)。如果onClick发生在提交(?)之前,这是有效的,我不确定它是否总是正确的。