Question

I’ve written this code to show a prompt before a form is submitted. If the value of the form input is greater than 100, it shows a dialog informing the user roughly how long it’ll take to process. If they click “OK”, it should return true, and submit the form, if they click cancel, it should return false and not submit the form.

The issue is, that the form isn’t waiting for this response, it’s submitting anyway. I can’t figure out what’s wrong…

Here’s the code:

$(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

Displaying a dialogue does not stop execution and wait until it is closed. Your submit function continues and the return true and return false do nothing.

What you need to do is stop the form submitting straight away (using e.PreventDefault below), then in the Yes callback submit the form again.

$("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);
    });
}
});

Example – http://jsfiddle.net/infernalbadger/ajRr7/