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

当前回答

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

<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”都返回更新记录。

2022-04-29 21:48:55

其他回答

我发现最好的解决办法是

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

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

2016-11-29 10:10:25

我写这个函数来帮助我

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"));

2019-07-23 06:17:33

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

<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”都返回更新记录。

2022-04-29 21:48:55

这个方法对我很管用

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

}

2014-09-03 14:56:23

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

首先，对于任何形式:

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

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

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

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

2011-07-29 19:15:04

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

推荐文章

最新文章

标签