在BootboxJS中使用两个按钮确认表单提交

Question

我正在使用Bootbox.js在提交表单之前显示确认框。 该表单有两个提交按钮，分别处理两个不同的操作。 我成功显示了对话框并提交了表单，但是单击的按钮的值未包含在请求中。 这很明显，因为通过手动提交表单，没有单击任何按钮。 因为我需要使用和不使用javascript的工作表单，所以我不能使用在运行时通过javascript更改了值的隐藏字段。 然后，当我离开弹出对话框时，我尝试触发按钮本身的click事件，但是我不知道如何理解最初单击的是哪个按钮。 此外，单击可能会触发另一个submit事件，从而导致无限循环。 我该如何预防？

<form name="myform" action="myaction" method="post">
    ...

    <button type="submit" name="decline" value="decline">Decline</button>
    <button type="submit" name="accept" value="accept">Accept</button>
</form>

$(document).ready(function() {
    $('form[name="myform"]').submit(function(e) {
        bootbox.confirm({
            message: '...',
            callback: function(result) {
                if (result) {
                    $('button[name="accept"]').click();
                }
            }
        });

        e.preventDefault();
    }
});

Answer 1

使当前脚本正常工作的一种（公认的蛮力）方法是创建一个哨兵变量，您可以在提交表单时进行切换：

$(function() {

    var firstClick = true;

    $('form[name="myform"]').submit(function(e) {

        if(firstClick === true){

            firstClick = false;

            bootbox.confirm({
                message: '...',
                callback: function(result) {
                    if (result) {
                        $('button[name="accept"]').click();
                    }
                }
            });

            e.preventDefault();
        }
    }
});

这样，您可以在首次触发Submit事件时处理表单提交，并允许后续的Submit事件提交页面。

根据HTML规范 ，它也一文不值

仅当按钮本身用于启动表单提交时，按钮（及其值）才包括在表单提交中。

因此，您的两个按钮（接受和拒绝）可以共享相同的name属性，只有被单击的按钮才报告其值。