Question

我正在创建一个可以在页面中添加多个发票的页面。有一个链接，以模态形式显示发票字段。此表单是使用ajax动态创建的。

填写发票字段后，我想在模态页脚中按钮提交表单。此按钮不是动态生成的，只是在模态体中生成。

如何使用模态表单之外的按钮以模态形式提交发票字段？

这是代码

创建发票视图

@using (Html.BeginForm("Create", "Invoice", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
    <div class="form-horizontal">
        <div id="invoiceList">
            @{ Html.RenderPartial("_InvoiceList", Model.Invoices); }
        </div>

        <a href="#" id="lnkAddInvoice">Add Row..</a>
        <br />

        <div class="form-group">
            <div class="col-md-12">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </div>
    </div>
}

<div class="modal fade" id="addInvoiceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Add Invoice</h4>
            </div>
            <div class="modal-body" id="add-invoice-container">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSaveInvoice">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#lnkAddInvoice").click(function (e) {
            $.ajax({
                type: "GET",
                url: "@Url.Content("~/Invoice/AddInvoice")",
                cache: false
            }).done(function (data) {
                if (!data.message) {
                    $("#add-invoice-container").html(data);
                    $("#addInvoiceModal").modal({ show: true, backdrop: true });
                } else {
                    $("#addInvoiceModal").modal("hide");
                }
            });
        });

        $("#btnSaveInvoice").click(function (e) {
            // Submit frmInvoice in modal form ???
        });
    });
</script>

AddInvoice（模态）

@using (Html.BeginForm("AddInvoice", "Invoice", FormMethod.Post, new { @id = "frmInvoice" }))
{
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.InvoiceNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.InvoiceNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InvoiceNo, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
}

Answer 1

我不确定我的问题是否正确，但如果您只有表格外的按钮，则可以执行此类操作。

 $("#btnSaveInvoice").click(function (e) {
     var $frm  = $("#frmInvoice");
     if($frm.length > 0){
        $frm.submit()
     }
 });

Form submit jquery

Answer 2

在HTML5中，您可以使用form属性指定<form>标记之外的按钮与表单相关联

<form id="myForm" .....> // give the form an ID
    ....
</form>
<button type="submit" form="myForm" value="Submit">Submit</button>

注意：似乎IE中可能尚未支持此功能

使用表单外的按钮提交动态创建的表单

2 个答案: