jQuery javascript not returning true/false properly

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);
        });
    }
  });
 });

use `e.preventDefault()` and `return false` combination... – Val Mar 26 '12 at 09:29 — Val, Mar 26 '12 at 09:29

score 2 · Accepted Answer · answered Mar 26 '12 at 09:30

2

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/

answered Mar 26 '12 at 09:30

Richard Dalton

35,513
6
73
91

Hi, thanks for the response. Your code doesn't trigger the dialog, I've ammended your code with my revision, which works perfectly, except it doesn't submit the form when "Yes" is clicked. I get an error: Uncaught TypeError: Property 'submit' of object # is not a function. Do you know what it could be? Thanks. – i-CONICA Mar 26 '12 at 09:49
m90, I'm not sure what you mean, the [0] wasn't added by me, and it gives the same error without that. Can you please elaborate? Thanks. – i-CONICA Mar 26 '12 at 09:56
I don't know why you guys are getting errors? My jsfiddle example works for me in chrome, firefox and IE. The [0] is getting the dom element for the form and calling submit on that. Which bypasses the jquery event [Reference](https://developer.mozilla.org/en/DOM/form.submit). It also shows the dialogue in all browsers for me. – Richard Dalton Mar 26 '12 at 09:59
I'm not sure either, but I'm not the only one. There's another guy with a similar problem when trying to submit a form after e.PreventDefault(); http://stackoverflow.com/questions/6915619/jquery-call-the-actions-form-after-calling-preventdefault Any idea? – i-CONICA Mar 26 '12 at 10:10
1

@i-CONICA, you have an input element inside the form that has attribute `name="submit"` which will override the submit method of the DOM element. Change the name of that input or remove it altogether, there is no need for `name="submit"`. – Esailija Mar 26 '12 at 10:16
@i-CONICA What browser are you using? Does my jsfiddle work for you? – Richard Dalton Mar 26 '12 at 10:18
Hi, Richard, yes, your jsfiddle works, but the code in practice here doesn't. My form had the submit with name submit like in Esailija's comment, that fixed it. It's working now. Thanks everyone. – i-CONICA Mar 26 '12 at 10:29

jQuery javascript not returning true/false properly

1 Answers1