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

I'm creating a page that can add more than one invoice in a page. There is a link, to display invoice fields in modal form. This form is dynamically created using ajax.

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

After filling out the invoice fields, I want to submit the form by button in the modal footer. This button is not generated dynamically, only form in the modal body.

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

How to submit the invoice fields in modal form using button that is outside the modal form?

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

Here is the code

这是代码

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

AddInvoice (Modal)

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

2 个解决方案

#1

Not sure i got understood the question correct, but if you only have the button outside the form you could do something like this.

不确定我是否理解了问题是正确的,但如果你只有表格外的按钮,你可以做这样的事情。

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

Form submit jquery

表单提交jquery

#2

In HTML5 you can use the form attribute to specify a button that is outside the <form> tags is associated with the form

在HTML5中,您可以使用form属性指定

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

Note: It seems that this may not yet be supported in IE

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

#1