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


当前回答

我发现最好的解决办法是

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

这不仅适用于输入,也适用于按钮标签。 它还获得按钮的id。

其他回答

提交表格时:

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

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

假设我有这些“提交”按钮:

<button type="submit" name="submitButton" id="update" value="UpdateRecord" class="btn btn-primary">Update Record</button>
<button type="submit" name="submitButton" id="review_info" value="ReviewInfo" class="btn btn-warning sme_only">Review Info</button>
<button type="submit" name="submitButton" id="need_more_info" value="NeedMoreInfo" class="btn btn-warning sme_only">Need More Info</button>

这个"submit"事件处理程序:

 $('#my_form').on('submit', function (e) {
     let x1 = $(this).find("input[type=submit]:focus");
     let x2 = e.originalEvent.submitter.textContent;

两种表达都可以。如果我点击第一个按钮,“x1”和“x2”都返回更新记录。

我还做了一个解决方案,效果很好: 它使用jQuery和CSS

首先,我做了一个快速的CSS类,这可以嵌入或在一个单独的文件。

<style type='text/css'>
    .Clicked {
        /*No Attributes*/
    }
</style>

接下来,在窗体内按钮的单击事件中,将CSS类添加到该按钮。如果按钮已经有CSS类,则删除它。(我们不需要两个CSS类[以防万一])。

    // Adds a CSS Class to the Button That Has Been Clicked.
    $("form :input[type='submit']").click(function () 
    {
        if ($(this).hasClass("Clicked"))
        {
            $(this).removeClass("Clicked");
        }
        $(this).addClass("Clicked");
    });

现在,测试按钮,看它是否有CSS类,如果测试的按钮没有CSS,那么另一个按钮会。

    // On Form Submit
    $("form").submit(function ()
    {
        // Test Which Button Has the Class
        if ($("input[name='name1']").hasClass("Clicked"))
        {
            // Button 'name1' has been clicked.
        }
        else
        {
           // Button 'name2' has been clicked.
        }
    });

希望这能有所帮助! 干杯!

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

});