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

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

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

下面是我处理提交点击的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（）”

，但当用户单击“取消”时，它仍然提交了表单

有什么建议吗？

更新：

将两个提交按钮更改为

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>

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

更新：

将两个提交按钮更改为

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>

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

---

您可以将确认添加到验证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;
    }
});

---

您可以将确认添加到验证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;
    }
});

---

固定答案，非常干净，不需要对您的HTMLfixed答案进行太多更改，也不需要对您的HTMLWell进行太多更改，而且不需要对您的HTMLWell进行太多更改，这是第一次完美地工作！干得好，谢谢你，朋友。第一次做得很好！做得好，谢谢你，朋友。谢谢你的回答，但理查德·道尔顿的解决方案更简单有效。谢谢你的回答，但理查德·道尔顿的解决方案更简单有效。