使用jQuery UI的模态对话框提交一个表单 [英] using jquery ui modal dialog to submit a form

问题描述

我提交表单时使用JQuery UI模态对话框有困难。这样做的目的是你打提交按钮，模态弹出窗口，并根据您的选择，从模态形式要么提交或没有。相反，模态弹出，并自动提交

I am having difficulty using JQuery UI Modal Dialog when submitting a form. The intent is you hit the submit button, the modal pop ups and depending on your selection from the modal the form either submits or it doesn't. Instead the modal pops up and automatically submits

前端：

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click"
        ValidationGroup="GroupSave" />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return checkSubmit()" OnClick="btnSubmit_Click" />
</div>

我曾尝试了jQuery / JS

What I have tried for the jquery/js

一个。）

function checkSubmit() {
$("#dialog").dialog({ modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; }
    }
});
}

乙。）

$(document).ready(function () {
$("#dialog").dialog({ autoOpen: false,
    modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; } 
    }
});
});

function checkSubmit() {
 $("#dialog").dialog("open");
}

我理解B如何（特别是 checkSubmit ）失败，所有它做的是打开对话框但AI认为这是可行的考虑，我有按钮返回值但同样是本质上的只是的打开对话框。

I understand how B (specifically the checkSubmit) fails, all it is doing is opening the dialog but for A I thought it would work considering I am having the buttons return values but that too is essentially just opening dialog.

推荐答案

使用标有一个按钮，提交打开对话框：

Use a button labeled "Submit" to open the dialog:

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click" ValidationGroup="GroupSave" />
    <input type="button" id="preSubmit" value="Submit" />
    <asp:Button ID="btnSubmit" class="ui-helper-hidden" Text="Submit" runat="server" OnClick="btnSubmit_Click" />
</div>

使用对话框中的提交按钮来触发你的＆LT click事件; ASP：按钮＆GT; 。

Use the Submit button in the dialog to trigger the click event for your <asp:Button>.

function submitForm() {
    $('input#<%=btnSubmit.ClientID %>').click();
}
function checkSubmit() {
    $("#dialog").dialog({
        "modal": true,
        "buttons": {
            "Submit": function() {
                submitForm();
            },
            "Go Back": function() {
                $(this).dialog("close");
            }
        }
    });
}
$(document).ready(function() {
    $('button#preSubmit').click(function(e) {
        checkSubmit();
        e.preventDefault();
        return false;
    });
    $('button#saveForLater').click(function(e) {
        $("#dialog").dialog('close');
        e.preventDefault();
        return false;
    });
});​

这篇关于使用jQuery UI的模态对话框提交一个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！