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


当前回答

你可以创建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发生在提交(?)之前,这是有效的,我不确定它是否总是正确的。

其他回答

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

我写这个函数来帮助我

var PupulateFormData= function (elem) {
var arr = {};
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
    arr[$(this).attr("name")] = $(this).val();
});
return arr;
};

然后使用

var data= PupulateFormData($("form"));

基于Stan和yann-h所做的,但这个默认为第一个按钮。这种整体方法的美妙之处在于,它同时捕捉到点击和输入键(即使焦点不在按钮上)。如果你需要在表单中允许输入,那么只要在按钮被聚焦时(即Stan的回答)响应这个。在我的例子中,我希望允许enter提交表单,即使用户当前的焦点是文本框。

我还使用了'name'属性而不是'id',但这是相同的方法。

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;

这为我工作,以获得活动按钮

            var val = document.activeElement.textContent;

它帮助了我https://stackoverflow.com/a/17805011/1029257

表单只有在点击提交按钮后才被提交。

var theBtn = $(':focus');
if(theBtn.is(':submit'))
{
  // ....
  return true;
}

return false;