jQuery confirm modal box for submit

Question

Hi I want to confirm submit form using modal box plugin but I have following issue:

When u click submit button in my HTML form modal box shown but after click submit form is not submitting - just do nothing.What I need to change ?

$('#mediamall-convert-form').submit(function() {
    // Reset errors
    $('#convert-sum-error').hide();

    // New validation
    valid_form = true;

    sum = parseFloat($('#convert-sum').val());
    if ((sum == '') ||
            (sum < 1) ||
            (sum > < ?php echo $author - > balance; ? > ) ||
            (sum % < ?php echo __md_cost_per_credit__; ? > != 0) ||
            (isNaN(sum)))
    {
        valid_form = false;
        $('#convert-sum-error').show();
    }

    if (valid_form)
    {

        //return confirm('<?php echo mmll_are_you_sure_you_want_to_continue; ?>?');
        //  $('.button5').click(function(){
        $.confirm({
            'title': 'Delete Confirmation',
            'message': 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons': {
                'Yes': {
                    'class': 'blue',
                    'action': function() {
                        return true;

                    }

                },
                'No': {
                    'class': 'gray',
                    'action': function() {

                    }   // Nothing to do in this case. You can as well omit the action property.
                }

            }

        });
        //  });

    }

    return false;
});

Answer 1

You always return false from the submit handler:

$('#mediamall-convert-form').submit(function () {
    // some logic
    // show the modal dialog
    return false;
});

The return true; in the Yes options of the dialog isn't doing what you think it's doing. It's only returning from the function in which it exists:

function(){
    return true;
}

It's not returning from the overall submit handler. (Return statements don't work that way, they only exit the scope of the function in which they're called, not parent functions on the call stack.)

I'm not familiar with the "confirm" plugin you're using, but I suspect that it's running asynchronously so the return false; at the end is always executed, and the return true; in the callback is just returning from nothing, to nothing. In the callback you probably don't want to return , but instead want to submit the form. Something like:

function () {
    $('#mediamall-convert-form').submit();
}

However , you're overriding the submit handler, so this may create an infinite loop of submit calls on the stack. We definitely don't want that. So you might need to change the overall handler to be the button click handler (or whatever is appropriate), instead of the form submit handler. Something like:

$('#mediamall-convert-form input[type=submit]').click(function () {
    // handler
});