如何使用 jQuery 对话框劫持表单，然后继续提交

发布于 2024-12-03 10:10:51 字数 836 浏览 0 评论 0 原文

我有一个简单的形式：

<form id="cancel" method="post" action="/Controller/Cancel">
   <input class="submitbtn" type="submit" value="Go">
   ...

我使用 jQuery 和 jQuery UI 对话框。我想做的是劫持表单的提交并显示一个对话框。当用户在对话框中单击“是”时，表单将继续并进行正常的页面提交。如果他们单击“否”，对话框就会取消。

我有这段代码：

$(document).ready(function () {

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function () {
            // Not sure what to do here
            $(this).dialog("close");
        },
        "No": function () {
            $(this).dialog("close");
        }
    }
});

$('#cancel').submit(function (event) {
    event.preventDefault();
    $('#dialog').dialog('open');

});

});

我的问题是，如何让提交代码根据对话框的响应返回 true/false 给客户端。

任何帮助表示赞赏。

原文

I have a simple form:

<form id="cancel" method="post" action="/Controller/Cancel">
   <input class="submitbtn" type="submit" value="Go">
   ...

I'm using jQuery with a jQuery UI dialog. What I'd like to do is hijack the submit of the form and display a dialog. When the user clicks 'yes' in the dialog, the form carries on and does a normal page submit. If they click 'No', the dialog just cancels.

I have this code:

$(document).ready(function () {

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function () {
            // Not sure what to do here
            $(this).dialog("close");
        },
        "No": function () {
            $(this).dialog("close");
        }
    }
});

$('#cancel').submit(function (event) {
    event.preventDefault();
    $('#dialog').dialog('open');

});

});

My question is, how do I get the submit code to return true/false to the client based on the response from the dialog.

Any help appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

儭儭莪哋寶赑 2024-12-10 10:10:51

这里的问题是，当您在“Yes”按钮回调中使用 $('#cancel').submit() 时，会再次触发 submit 事件，并且 event.preventDefault() 阻止实际提交。

一个快速解决方法是在实际提交表单之前取消绑定提交事件。（演示：http://jsfiddle.net/WQjFj/6/）

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function() {
            $('#cancel').unbind("submit").submit();
            $(this).dialog("close");
        },
        "No": function() {
            $(this).dialog("close");
        }
    }
});

可以找到另一种解决方案关于这个答案：使用 jquery ui 对话框确认表单提交操作

The problem here is that when you use $('#cancel').submit() within the "Yes" button callback, the submit event is triggered again and event.preventDefault() stops the from from actually being submitted.

A quick fix would be to unbind your submit event just before actually submitting the form. (Demo: http://jsfiddle.net/WQjFj/6/)

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function() {
            $('#cancel').unbind("submit").submit();
            $(this).dialog("close");
        },
        "No": function() {
            $(this).dialog("close");
        }
    }
});

Another solution can be found on this answer: Using jquery ui dialog to confirm action for form submission

回复收藏 0 原文