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

当前回答

我还做了一个解决方案，效果很好: 它使用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.
        }
    });

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

2014-10-08 14:47:39

其他回答

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

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

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

return false;

2014-08-15 13:11:18

另一个可能的解决方案是在表单中添加一个隐藏字段:

<input type="hidden" id="btaction"/>

然后在ready函数中添加函数来记录按下的键:

$('form#myForm #btnSubmit').click(function() {
    $('form#myForm #btaction').val(0);
});

$('form#myForm #btnSubmitAndSend').click(function() {
    $('form#myForm #btaction').val(1);
});

$('form#myForm #btnDelete').click(function() {
    $('form#myForm #btaction').val(2);
});

现在在表单提交处理程序中读取隐藏变量并基于它进行决定:

var act = $('form#myForm #btaction').val();

2013-06-30 10:54:39

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

            var val = document.activeElement.textContent;

2021-09-13 19:55:22

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

2019-11-19 10:47:25

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

推荐文章

最新文章

标签