8

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

<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()但更愿意能够在表单提交事件中实现我的目标。

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

4

4 回答 4

12

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

var ButtonValue;

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

$('#my-form').submit(function(){
    //psuedo code
    if(ButtonValue == 1)
    {
        ....
    }
});
于 2013-01-31T15:04:11.983 回答
7

这个答案是对@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');
于 2014-03-26T12:21:38.940 回答
1

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

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

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

PS 在 Firefox 45 及更高版本、chrome 67 及更高版本上测试

于 2021-08-13T14:57:17.920 回答
0

关于你的说法：

我看到 $('[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")
    {
        ...
    }
});

类似于此处的示例。

于 2014-03-10T18:00:06.030 回答