jquery检测哪个按钮提交表单答案

【问题标题】：jquery detect which button submitted formjquery检测哪个按钮提交表单
【发布时间】：2013-01-15 17:30:33
【问题描述】：

我有一个包含以下内容的表单：

<form id="my-form" ...>
    ...
    <button type="submit" name="bttnsubmit" value="1">The first button</button>
    <button type="submit" name="bttnsubmit" value="2">The last button</button>
</form>

我想检测是哪个触发了表单提交事件：

$('#my-form').submit(function(){
    //psuedo code
    if($('[name=bttnsubmit]').val() == 1) {
        ....
    }
});

显然，选择器将始终返回它遇到的第一个 bttnsubmit 元素的值，所以我需要一些其他的魔法选择器或过滤器或其他东西。

我见过$('[name=bttnsubmit][clicked=true]') 被吹捧，但我的尝试还没有奏效...

我当然可以求助于$('[name=bttnsubmit]').click()，但更希望能够在表单提交事件中实现我的目标。

非常感谢任何帮助/提示。

【问题讨论】：

标签： jquery submit detect

【解决方案1】：

我不知道是否有任何内置事件数据（可能有），但想到的一个想法是处理按钮的单击事件并存储值的全局引用。像这样的：

var ButtonValue;

$('button[type="submit"]').click(function(e){
   ButtonValue = $(this).val();
});

$('#my-form').submit(function(){
    //psuedo code
    if(ButtonValue == 1)
    {
        ....
    }
});

【讨论】：

【解决方案2】：

此答案是对@musefan 答案的改进。

避免使用全局变量。最好保持数据形式：

$('button[type=submit]').click(function (e) {
    var button = $(this);
    buttonForm = button.closest('form');
    buttonForm.data('submittedBy', button);
});

并在提交处理程序中获取它：

$('#my-form').submit(function (e) {
    var form = $(this);
    var submittedBy = form.data('submittedBy');
    if(submittedBy.val() == 1) {
        // Any code here...
    }
});

可以通过点击“输入”来提交表单。为了避免 null 在 submittedBy 变量中：

var submittedBy = form.data('submittedBy') || form.find('button[type=submit]:first');

【讨论】：

嗯，这似乎对我不起作用。按钮 click 处理程序被忽略，取而代之的是 submit 处理程序。
facepalm 忽略 ^ 这是因为我使用的是而不是

【解决方案3】：

当点击一个元素时，HTML DOM 会抛出一个活动元素属性。它返回 DOM 中当前聚焦的元素。通过单击提交按钮提交表单时，您可以在 Jquery 中检测到此元素并对其执行必要的操作。此方法比其他方法更好，因为您可以将元素从 button type="submit" 更改为 input type="submit" 并且它仍然可以工作。您可以更改元素的 ID 和类，它仍然可以工作。您可以同时添加提交按钮或输入按钮，或者无论您添加多少按钮，它仍然可以工作。要在 Jquery 中检测此按钮，您可以使用此代码检测活动元素。

$('#my-form').submit(function(){
   var value=$(document.activeElement).val();
//psuedo code
    if(value == 1)
    {
        Your code....
    }
});

上面的代码将返回表单提交时被点击的按钮。 如果您在点击没有提交的按钮时尝试提交表单，此代码也很有用属性或通过单击表单外部的按钮，甚至对于单击创建虚拟表单并提交的按钮。

附注在 firefox 45 及以上、chrome 67 及以上测试

【讨论】：

一行附加代码完美运行。我用它来获取提交表单的按钮的数据元素，如下所示：let data = $(document.activeElement).data('dataElementName');

【解决方案4】：

关于你的陈述：

我看到 $('[name=bttnsubmit][clicked=true]') 被吹捧，但在我的尝试中还没有奏效...

我发现这在其他地方没有得到正确解释。这不是一件自动的事情。您仍然需要在任何时候单击提交按钮时添加“clicked”属性来进行设置。

$("#my-form input[type=submit]").click(function () {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
$("#my-form").submit(function () {
    var clickedSubmitValue = $("input[type=submit][clicked=true]").val();
    if (clickedSubmitValue == "1")
    {
        ...
    }
});

类似于示例here。

【讨论】：