Question

提交表单时，我很难使用JQuery UI模式对话框。目的是你点击提交按钮，模态弹出窗口，并根据您从模式中选择的形式提交或不提交。而是模式弹出并自动提交

前端：

<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尝试了什么

一个。）

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

B。）

$(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认为它可以工作，因为我有按钮返回值，但这也基本上是打开对话框。

Answer 1

使用标有“提交”的按钮打开对话框：

<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>

使用对话框中的Submit按钮触发<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模式对话框提交表单

1 个答案: