How to prevent form submission using confirm dialog?

Question

I have a form with two submit buttons - Save and Submit. Here is the HTML markup for these buttons:

<form id="formBooking">
<input type="submit" name="FormAction" id="Save" value="Save">
<input type="submit" name="FormAction" id="Submit" value="Submit">
</form>

I created two functions for showing a confirm dialog depending on which FormAction was chosen:

function confirmSave()
{
    return confirm('This operation will save your booking.');
    }

function confirmSubmit()
{
    return confirm('This operation will submit your booking.');

}

And here is my JQuery to handle the submit click:

$("#formBooking").on('click', 'input[type="submit"]', function (e) {
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok
        e.preventDefault();
        return;
    } else {
        // HERE I NEED TO FIRE THE CONFIRM DIALOG DEPENDING ON IF ITS A SAVE OR SUBMIT
        var options = {
            data: {
                FormAction: $(this).attr("value") // is it a save or submit?
            },
            forceSync: true,
            uploadProgress: function (percentComplete) {},
            beforeSend: function () {

            },
            success: function () {

            },
            complete: function () {

            }
        }
        $("#formBooking").ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false;
    }
});

So when a users clicks on either of the submit buttons, JQuery should fire a confirmSave() or confirmSubmit() function. If the users clicks "cancel" in the confirm dialog then I don't want the form to submit at all.

I tried adding "onClick: confirmSave()" to the button itself which works, but when the user clicks cancel it still submitted the form!

Any suggestions please?

Answer 1

You can add the confirm into your validation if statement like so:

$("#formBooking").on('click', 'input[type="submit"]', function (e) {
    if (!$("#formBooking").valid() 
          || !($(this).is('#Save') ? confirmSave() : confirmSubmit())) { 
        e.preventDefault();
        return;
    } else {

        var options = {
            data: {
                FormAction: $(this).attr("value") // is it a save or submit?
            },
            forceSync: true,
            uploadProgress: function (percentComplete) {},
            beforeSend: function () {

            },
            success: function () {

            },
            complete: function () {

            }
        }
        $("#formBooking").ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false;
    }
});

Answer 2

UPDATED:

Change your two submit buttons to type="button", and:

HTML:

<form id="formBooking">
    <input type="button" name="FormAction" id="Save" value="Save">
    <input type="button" name="FormAction" id="Submit" value="Submit">
</form>

jQuery/javascript:

$(document).on('click', '#Save', function() {
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok
        e.preventDefault();
        return;
    } else {
        confirmSave();
        submitForm();
    }
});

$(document).on('click', '#Submit', function() {
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok
        e.preventDefault();
        return;
    } else {
        confirmSubmit();
        submitForm();
    }
});

function submitForm(){
        // HERE I NEED TO FIRE THE CONFIRM DIALOG DEPENDING ON IF ITS A SAVE OR SUBMIT
        var options = {
            data: {
                FormAction: $(this).attr("value") // is it a save or submit?
            },
            forceSync: true,
            uploadProgress: function (percentComplete) {},
            beforeSend: function () {

            },
            success: function () {

            },
            complete: function () {

            }
        }
        $("#formBooking").ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false;
    }
} //END fn formSubmit()
function confirmSave() {
    return confirm('This operation will save your booking.');
}
function confirmSubmit() {
    return confirm('This operation will submit your booking.');
}