javascript - jQuery javascript 未正确返回 true/false

Question

我编写此代码是为了在提交表单之前显示提示。如果表单输入的值大于 100，它会显示一个对话框，告知用户大约需要多长时间来处理。如果他们单击“确定”，则应返回 true 并提交表单，如果单击“取消”，则应返回 false 且不提交表单。

问题是，表单没有等待此响应，而是正在提交。我不知道出了什么问题......

代码如下:

$(document).ready(function() {
  $("form#generate_vouchers").submit(function(){
    if($("input#quantity").val() > 100){
        var warning = "It will take around " + Math.round(($("input#quantity").val() / 23)) + " seconds to generate this batch.<br />Generation will continue even if you leave this page.";
        //Does around 23 codes per second, nearly all of that time is inserts.
        $('<div title="Batch information"></div>').html(warning).dialog({
            draggable: false,
            modal: true,
            minWidth: 350,
            buttons: {
                "Cancel" : function() {
                    $(this).dialog("close");
                    return false;
                },
                "Yes": function() {
                    $("input#submit").hide(300, function(){
                        $("img#loader").show(300);
                    });
                    return true;
                }
            }
        });
    }
    else{
        $("input#submit").hide(300, function(){
            $("img#loader").show(300);
        });
    }
  });
 });

Answer 1

显示对话框不会停止执行并等待它关闭。您的提交函数将继续，并且 return true 和 return false 不执行任何操作。

您需要做的是立即停止表单提交(使用下面的e.PreventDefault)，然后在Yes回调中再次提交表单。

$("form#generate_vouchers").submit(function(e){
if($("input#quantity").val() > 100){
    e.preventDefault(); // stop submit
    var warning = "It will take around " + Math.round(($("input#quantity").val() / 23)) + " seconds to generate this batch.<br />Generation will continue even if you leave this page.";
    //Does around 23 codes per second, nearly all of that time is inserts.
    $('<div title="Batch information"></div>').html(warning).dialog({
        draggable: false,
        modal: true,
        minWidth: 350,
        buttons: {
            "Cancel" : function() {
                $(this).dialog("close");
            },
            "Yes": function() {
                $("form#generate_vouchers")[0].submit(); // submit form manually
                $("input#submit").hide(300, function(){
                    $("img#loader").show(300);
                });
            }
        }
    });
}
else{
    $("input#submit").hide(300, function(){
        $("img#loader").show(300);
    });
}
});

示例 - http://jsfiddle.net/infernalbadger/ajRr7/