jQuery:如何获得哪个按钮被点击提交的表单?

我有一个.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(e){

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

2014-11-20 20:49:46

其他回答

试试这个:

$(document).ready(function(){
    
    $('form[name="testform"]').submit( function(event){
      
        // This is the ID of the clicked button
        var clicked_button_id = event.originalEvent.submitter.id; 
        
    });
});

2021-02-23 18:52:33

哇，有些解决方案可能会变得复杂!如果您不介意使用一个简单的全局变量，只需利用输入按钮单击事件首先触发的事实。可以通过使用$('#myForm input')进一步过滤$('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);
      });
    });

2014-02-22 20:09:04

对我来说，最好的解决方案是:

$(form).submit(function(e){

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

2014-11-20 20:49:46

由于我不能对已接受的答案进行评论，我在这里带来了一个修改后的版本，它应该考虑到表单之外的元素(即:使用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]');
})

2015-09-02 17:21:48

提交表格时:

文档。activeElement将提供被单击的提交按钮。 document.activeElement.getAttribute('value')将给出该按钮的值。

注意，如果表单是通过按Enter键提交的，那么文档。activeElement将是当时关注的任何表单输入。如果这不是一个提交按钮，那么在这种情况下，可能没有“被点击的按钮”。

2015-10-21 16:07:54

jQuery:如何获得哪个按钮被点击提交的表单?

推荐文章

最新文章

标签