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

我正在创建一个页面，可以在一个页面中添加多个发票。有一个链接，用于以模式形式显示发票字段。此表单是使用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>

@使用（Html.BeginForm（“创建”、“发票”、FormMethod.Post、新的{@enctype=“多部分/表单数据”}））
{
@{Html.RenderPartial（“_InvoiceList”，Model.Invoices）；}


}
&时代；接近
添加发票
接近
保存更改
$（文档）.ready（函数（）{
$（“#lnkAddInvoice”）。单击（函数（e）{
$.ajax({
键入：“获取”，
url:“@url.Content（“~/Invoice/AddInvoice”）”，
缓存：false
}).完成（功能（数据）{
如果（！data.message）{
$（“#添加发票容器”）.html（数据）；
$（“#addInvoiceModal”）.modal（{show:true，background:true}）；
}否则{
$（“#addInvoiceModal”）.modal（“隐藏”）；
}
});
});
$（“#btnSaveInvoice”）。单击（函数（e）{
//以模态形式提交frmInvoice？？？
});
});

附加语音（模态）

@使用（Html.BeginForm（“AddInvoice”，“Invoice”，FormMethod.Post，new{@id=“frmInvoice”}））
{
@LabelFor（model=>model.InvoiceNo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.InvoiceNo，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.InvoiceNo，“，new{@class=“text danger”}）
}

我不确定我是否理解了问题的正确性，但是如果你只在表单外有按钮，你可以这样做

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

---

在HTML5中，您可以使用

表单

属性指定与表单关联的

标记之外的按钮

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

//给表单一个ID
....
提交

---

注意：IE中似乎还不支持这一点，正如您在上面的代码中所看到的，

btnSaveInvoice

位于

frmInvoice

之外，

frmInvoice

是动态生成的。我认为当我们处理动态html时，我们应该使用

$（文档）。？

我不知道语法。我只想提交生成的

frmInvoice

dynamically@Willy在这种情况下，您确实不需要，因为只要按钮在开始时就在那里，这并不重要，您可能只需要检查表单是否为null，以防用户在呈现表单之前按下按钮，我会更新我的答案。@Willy作为你的UI中的一个小东西，你

btnSaveInvoice

你在js中使用的

btnAddInvoice

，我正在使用IE 11，正如你已经指出的，IENo不是最好的源代码，但感谢链接，但大多数用户仍然使用IE作为浏览器。

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