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

当前回答

基于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;

2014-05-04 21:54:49

其他回答

我能够使用jQuery originalEvent。提交Chrome与ASP。Net Core web应用程序:

我的.cshtml表单:

<div class="form-group" id="buttons_grp">
    <button type="submit" name="submitButton" value="Approve" class="btn btn-success">Approve</button>
    <button type="submit" name="submitButton" value="Reject" class="btn btn-danger">Reject</button>
    <button type="submit" name="submitButton" value="Save" class="btn btn-primary">Save</button>
    ...

jQuery提交处理程序:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
    $(document).ready(function() {
    ...
    // Ensure that we log an explanatory comment if "Reject"
    $('#update_task_form').on('submit', function (e) {
        let text = e.originalEvent.submitter.textContent;
        if (text == "Reject") {
           // Do stuff...
        }
    });
    ...

jQuery微软捆绑了我的ASP。Net Core环境是v3.3.1。

2021-02-08 22:13:57

提交表格时:

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

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

2015-10-21 16:07:54

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

<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() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}

2015-02-24 13:05:31

$('form').submit(function (ev) {
  let clickedButton = ev.originalEvent.explicitOriginalTarget;
});

2019-11-19 10:47:25

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

推荐文章

最新文章

标签