使用表單外部的按鈕提交動態創建的表單

我創建的頁面可以在頁面中添加多個發票。有一個鏈接，以模態形式顯示發票字段。這個表單是使用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> 
}

來源

2015-06-12 Willy

不知道我得到了理解題正確，但如果你只在窗體外部有按鈕可以做這樣的事情。

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

Form submit jquery

來源

2015-06-12 11:49:29 trebor

正如你在上面的代碼中看到的，'btnSaveInvoice'位於'frmInvoice'之外，'frmInvoice'是gen動態地進行。我認爲當我們處理動態html時，我們應該使用'$（document）。''我不知道語法。我只想提交動態生成的'frmInvoice' – Willy

@Willy在這種情況下，你真的不需要這樣做，因爲只要按鈕在開始時沒有關係，你可能應該檢查表單是否如果用戶在表單呈現之前按下按鈕，我會更新我的答案。 – trebor

@Willy作爲一個小東西在你的UI你'btnSaveInvoice'在js中你使用'btnAddInvoice'作爲選擇器 – trebor

在HTML5中，你可以使用form屬性來指定一個按鈕，是<form>標籤外與表單關聯

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

注：看來，這未必但在IE中支持

來源

2015-06-12 11:49:38

我使用IE 11，正如你已經指出，它不工作與IE – Willy

沒有最好的來源，但[這證實了我的懷疑]（http://www.w3schools.com /tags/att_button_form.asp） –

感謝您的鏈接，但大多數用戶仍然使用IE作爲瀏覽器。 – Willy

使用表單外部的按鈕提交動態創建的表單

回答

相關問題