检测点击了哪个提交按钮答案

【问题标题】：Detect which submit button was clicked检测点击了哪个提交按钮
【发布时间】：2016-02-19 06:40:09
【问题描述】：

我知道这个问题听起来很像一堆其他问题，但我发誓我无法在任何地方找到正确的解决方案。我有一个具有多个提交按钮的旧表单。如果单击了一个，我需要进行一些客户端验证并可能停止提交。如果另一个被点击，我不需要做这个验证。

我发现如果我创建一个.submit() 处理程序，我似乎无法访问实际点击了哪个按钮。另一方面，如果我捕获了我需要担心的按钮的.click() 事件，那么我无法阻止表单通过.preventDefault()（或.stopImmediatePropagation()）提交。

这是尝试使用按钮 .click() 处理程序的代码的最新迭代：

$('#nextButton').click( function( e ) {
  e.preventDefault(); // The form submits anyway (which kind of makes sense)
  // return false also doesn't prevent the submission

  // If any session question is unanswered, abort
  /* $('#registrants input:text[id$="Answer"]').each( function( i, input ) {
    if( $.trim( $(input).val() ) == '' ) {
      submit = false;
    }
  });*/
});

我在这里缺少什么？必须有一种方法可以做到这一点，而且看起来应该相当简单，但如果我有任何运气的话，我会被诅咒的。

谢谢。

【问题讨论】：

如果有多个提交，为什么你为他们使用相同的 id。使用不同的 id 并将点击函数绑定到每个提交按钮，因此无需找出点击了哪个提交。
@Sedat -- 他们没有相同的 id。我关心的是#nextButton 我正在捕获点击。我似乎无法阻止提交。
@RobWilkerson - preventDefault 应该可以正常工作：jsfiddle.net/interdream/DQNSb/1
@JamesAllardice -- 很奇怪。我想知道为什么它对我不起作用。我会检查我的 jQuery 版本...
您可以使用点击处理程序来检测按钮，然后使用$('form').bind('submit', 'false'); 来阻止默认操作。

标签： jquery

【解决方案1】：

也许是这样的？

http://jsfiddle.net/4wnyY/3/

var which;

$("input").click(function () {
    which = $(this).attr("id");
});
$("#form").submit(function () {
    if (which == "button2") {
        return false; // if "button2" submit clicked - prevent submission
    }
});

此代码的主要问题是浏览器兼容性 - 我不知道是否所有浏览器都工作相同，是否会在提交之前捕获点击事件。我记得在一个版本的 IE 上它是不同的，可能是 7。但它是可以修复的。

【讨论】：

【解决方案2】：

也许这会有所帮助： http://geekswithblogs.net/renso/archive/2009/09/09/intercept-a-form-submit-with-jquery-and-prevent-or-allow.aspx

基本上它的意思是检查表单 submit() 处理程序中的按钮 ID。

http://jsfiddle.net/4wnyY/5/

【讨论】：

按照建议使用explicitOriginalTarget，不兼容跨浏览器。见这里：stackoverflow.com/questions/179826/…

【解决方案3】：

@Przemek 对此有正确的答案和方法。

如果您正在提交表单，我只会添加以确保您将函数放入 $(document).ready(function(){}。

适用于所有浏览器。请参阅下面的基于 Przemek 示例的适用于我的解决方案：

    //Used to hold the button name of what was clicked
        var which;

        $(document).ready(function () {

            $("button").click(function () {
                which = $(this).attr("id");
                //alert("Button Clicked Name");
            });

            $('#searchForm').submit(function (evt) {
                if (btnName = "btnSave") {
                    // do something for the Save option
                } else {
                    // do something different for the Submit or Save and Close option
                }
}
}

【讨论】：