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

Question

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

填写发票字段后，我想通过模式页脚中的按钮提交表单。该按钮不是动态生成的，仅在模态体中形成。

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

这是代码

创建发票 View

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

添加发票(模态)

@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