Question

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

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

我根据选择的FormAction创建了两个用于显示确认对话框的函数：

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

您可以将确认添加到验证if if语句中：

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

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

2 个答案: