使用 bootbox 防止按钮提交确认并在消息上显示其值答案

【问题标题】：Prevent button submissions with bootbox confirm and display their values on message使用 bootbox 防止按钮提交确认并在消息上显示其值
【发布时间】：2013-11-15 22:28:43
【问题描述】：

我有一个带有 3 个按钮的简单表单，每个按钮执行不同的操作。单击一次，我希望用户使用 bootbox.confirm() 确认他的操作。我希望确认框显示：“您确定选择：”+ 值。我怎样才能做到这一点？

HTML：

<form action="" method="post">
     <button  type="submit" name="action" value="success" class="confirm"></button>
     <button type="submit" name="action" value="fail" class="confirm"></button>
     <button type="submit" name="action" value="no exam" class="confirm</button>
</form>

Javascript / jquery 我试过了：

<script>
  $(document).ready(function() {
    $(document).on("click", ".confirm", function(e) {
        e.preventDefault();
        bootbox.confirm("Are you sure for your choice?", function(result) {
        if (result) {
          console.log("user confirmed");
        } else {
            console.log("user declined");
        }
      });
    });
  });
</script>

这是正确的方法（每个按钮上都有类）还是我必须选择表单？我得到了正确的确认框和日志，但成功后我不知道如何提交。另外我不知道如何将选择的值放入消息中。

【问题讨论】：

看起来很合理。我会移动 e.preventDefault();调用确认框的回调，因此只有在用户未确认时才取消操作。

标签： javascript jquery html forms bootbox

【解决方案1】：

希望您能够弄清楚这一点，但如果不是，那么您所缺少的就是这一切。另外，因为这个流程是异步的，所以不要将 e.preventDefault() 移动到回调中。

$(document).ready(function() {
    $(document).on("click", ".confirm", function(e) {
        e.preventDefault();
        var $this = $(this);
        bootbox.confirm("Are you sure for your choice: "+$this.val()+"?", function(result) {
            if (result) {
                console.log("user confirmed");
            } else {
                console.log("user declined");
            }
        });
    });
});

【讨论】：