jQueryUI Modal confirmation dialog on form submission

Question

I am trying to get a modal confirmation dialog working when a user submits a form. My approach, I thought logically, would be to catch the form submission. My code is as follows,

$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            //$(this).dialog('close');
            return true;
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

$('#completeform').submit(function(e){
    e.preventDefault();
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            $('#multi-dialog-confirm').dialog('open');
        }
    }
    //return false;
});

So I'm setting up my dialog first. This is because I'm pretty certain that the scope of the dialog needs to be at the same level as the function which calls it.

However, the issue is that when you click 'Confirm' nothing happens. The submit action does not continue. I've tried $('#completeform').submit(); also, which doesn't seem to work. I have tried removing the .preventDefault() to ensure that the form submission isn't completely cancelled, but it doesn't seem to make a difference between that and returning false.

Not checking the box, show and alert fine. Might change to dialog at some point ;), clicking 'Cancel' closes the dialog and remains on the page, but the elusive 'Confirm' buttons seems to not continue with the form submission event.

If anyone can help, I'd happily share my lunch with you! ;)

Answer 1

When doing .submit in the dialogue, the submit code is executed once again.

Try this:

$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            dialogueIsSubmitting = true;
            $('#completeform').submit();
            return false;
        },
        'Cancel': function(){
            dialogueOpen = false;
            $(this).dialog('close');
            return false;
        }
    }
});

var dialogueIsSubmitting = false;

$('#completeform').submit(function(e){
    if(dialogueIsSubmitting) return true;

    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            $('#multi-dialog-confirm').dialog('open');
        }
    }
    return false;
});

Answer 2

Figured I should include my code here, in case someone finds it helpfull.

    /*
 * Setup the confirm multiple completions dialog
 */
$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            $(this).dialog('close');
            document.completeform.submit();
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

/*
 * When completing an item on the search page, validate and confirm
 */
$('#completeform').submit(function(e){
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            e.preventDefault();
            $('#multi-dialog-confirm').dialog('open');
        }else{
            return true;
        }
    }
    //return false;
});