JQuery 简单模态

Question

我的模式中有一个提交按钮，按下它时什么也没有发生！当按下提交按钮时，如何使我的表单提交？我不想使用 $('form').submit();因为这样 php 不会检测到我的按钮被单击。

<script type="text/javascript" language="javascript">
    $(document).ready(function () { 
        $('#btnAdd').click(function (e) { 
            //clicking the button shows the modal popup up 
            e.preventDefault();
            $('#AddCareerItem').modal(); 
        });
        $('#btnCancelCareerContent').click(function (e) {
            //close the modal with the cancel button 
            $.modal.close();
        }); 
    }); 
</script>

Answer 1

马特，

从您提供的代码来看，您似乎没有绑定到提交事件。 #AddCareerItem 中的 HTML 是什么样子的？您是否使用提交输入并拥有正确的表单定义？

如果您想要绑定事件，则需要使用 onShow 回调。比如：

$('#AddCareerItem').modal({onShow: function (dialog) {
    $("form", dialog.data).submit(function () {
        // your code here
    });
});

希望有帮助。

-Eric

http://www.ericmmartin.com

Answer 2

与 jquery UI 对话框一样，简单模式将按钮从 <<<表格>元素通常会包装 ASP.NET 和 JSF 等框架中的所有内容，并将它们添加到 << /身体>结束标签。因此，您必须使用选项 persist: true 调用模态，然后单击“提交按钮”关闭模态并触发表单提交。您必须关闭模式，以便元素返回到 DOM 中的正常位置...:)

Answer 3

这是我得到的代码。没什么花哨的。隐藏的表单位于表单标签内，我正在使用提交按钮。

    <form action="somepage.php" enctype="multipart/form-data" method="post">
        <div class="rw">
            <div class="lb">Title</div>
            <div class="dt"><input type="text" name="txtTitle" value="" /></div>
            <div class="cr"></div>
        </div>
        <div class="rw">
            <div class="lb">Description</div>
            <div class="dt"><textarea name="txtDescription" ></textarea></div>
            <div class="cr"></div>
        </div>
        <div class="rw">
            <div class="lb"> </div>
            <div class="dt"><button id="btnAdd" type="button" >Add Career Item</button></div>
            <div class="cr"></div>
        </div>
        <div class="rw">
            <div class="lb"> </div>
            <div class="dt"><input type="submit" name="btnSave" value="Save" /></div>
            <div class="cr"></div>
        </div>
        <div id="AddCareerItem" style="display:none;">
                <div class="rw">
                    <div class="lb">Type</div>
                    <div class="dt"><select name="drpdwnType" ><option value="1">Duties</option><option value="2">Required</option></select></div>
                    <div class="cr"></div>
                </div>
                <div class="rw">
                    <div class="lb">Content</div>
                    <div class="dt">
                        <input name="txtCareerDetailContent" type="text" value="" />
                    </div>
                    <div class="cr"></div>
                </div>
                <div class="rw">
                    <div class="lb"> </div>
                    <div class="dt"><input type="submit" id="btnAddCareerDetail" name="btnAddCareerDetail" value="Add" /> <input type="button" id="btnCancelCareerContent" value="Cancel" /></div>
                    <div class="cr"></div>
                </div>
        </div>
    </form>