JQueryUI Modal confirmation dialog when submitting a form

Question

I am trying to get a modal confirmation dialog when a user submits a form. My approach, as I thought logically, was to catch the presentation form. 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 set up my dialogue first. This is due to the fact that I am quite sure that the scope of the dialogue should be at the same level as the function that calls it.

However, the problem is that when you click "Confirm", nothing happens. Sending action does not continue. I tried too $('#completeform').submit();, which doesn't seem to work. I tried removing .preventDefault () to ensure that the form view is not completely canceled, but it does not seem to affect this and returns false.

, . - ;), "" , "", , .

- , !;)

Answer 1

, , - .

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

Answer 2

.submit .

:

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