如何使用确认对话框防止表单提交

Question

我有一个带有两个提交按钮的表格 - 保存并提交。这是这些按钮的HTML标记：

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

我创建了两个功能，以显示确认对话框，具体取决于选择哪种表格：

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

这是我处理提交点击的jQuery：

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

因此，当用户单击一个提交按钮时，jQuery应触发confirmSave()或confirmSubmit()功能。如果用户在确认对话框中单击"取消"，则我不希望该表格完全提交。

我尝试将"onClick: confirmSave()"添加到有效的按钮本身中，但是当用户单击取消时，它仍然提交表单！

有什么建议？

Answer 1

您可以在验证中将确认添加到您的验证中：

：

$("#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

更新：

将您的两个提交按钮更改为type="button"，并且：

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