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/

jQuery javascript没有正确返回true / false

1 个答案: