Question

我在提交表单之前使用Bootbox.js显示确认框。表单有两个提交按钮，可以处理两个不同的操作。我成功地显示了对话框并提交了表单，但是单击的按钮的值不包含在请求中。这是显而易见的，因为通过手动提交表单，没有点击任何按钮。因为我需要有一个有和没有javascript的工作表单，我不能使用隐藏字段，其值在运行时由javascript更改。当我离开弹出对话框时，我尝试触发按钮本身的点击事件，但是我不知道如何理解最初点击的按钮。此外，点击可能会触发另一个导致无限循环的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();
        }
    }
});

这使您可以在第一次触发提交事件时处理表单提交，并允许后续提交事件提交页面。

也没有价值（per the HTML spec）

如果按钮本身用于启动表单提交，则按钮（及其值）仅包含在表单提交中。

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

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

1 个答案: