來自動態添加的輸入字段時未發送發佈數據

Question

我有一個表單，用於註冊無限數量的電話號碼，我在其中動態添加更多輸入字段，因此用戶需要它，因此它被定義爲（使用Laravel HTML傭工）：

<h3>Telefone(s):</h3> <a id="add-tel" class="btn btn-danger" data-qtdtels="1">+</a> 
<div class="row"> 
<div id="cad-telefone" class="col-md-12 text-center"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <label for="ddi1">Código internacional (DDI):</label> 
      {{ Form::number('ddi1', 55, array('class' => 'form-control', 'placeholder' => 'DDI')) }} 

     </div> 
     <div class="col-md-4"> 
      <label for="ddd1">Código regional (DDD):</label> 
      {{ Form::number('ddd1', null, array('class' => 'form-control', 'placeholder' => 'DDD')) }} 

     </div> 
     <div class="col-md-4"> 
      <label for="numero1">Número do telefone</label> 
      {{ Form::text('numero1', null, array('class' => 'form-control', 'maxlength' => '20', 'placeholder' => 'Nro Telefone')) }} 

     </div> 
    </div> 
</div> 

每當與ID add-tel按下按鈕，它運行它增加了額外的輸入字段稿，並根據數量注意輸入字段的name定義投入：

$("#add-tel").on("click", function(){ 

    // qtdtels = the number of input fields 
    var qtdtels = parseInt($(this).attr("data-qtdtels")); 
    qtdtels += 1; 
    $(this).attr("data-qtdtels", qtdtels); 
    qtdtels = qtdtels.toString(); 

    var text = "<br><div class=\"row\">"; 

    text += "<div class=\"col-md-4\">"; 
    text += "<input class=\"form-control\" placeholder=\"DDI\" name=\"ddi" + qtdtels + "\" value=\"55\" type=\"number\">"; 
    text += "</div>"; 

    text += "<div class=\"col-md-4\">"; 
    text += "<input class=\"form-control\" placeholder=\"DDD\" name=\"ddd" + qtdtels + "\" type=\"number\">"; 
    text += "</div>"; 

    text += "<div class=\"col-md-4\">"; 
    text += "<input class=\"form-control\" maxlength=\"20\" placeholder=\"Nro telefone\" name=\"numero" + qtdtels + "\" type=\"text\">"; 
    text += "</div>"; 

    text += "</div>"; 
    $(text).appendTo("#cad-telefone"); 

}); 

該進程在客戶端正常運行，並給出新的輸入。問題是，當我提交代碼時，在$request上它只發布字段ddi1,ddd1,numero1。所有其他動態添加字段如ddiX,dddX,numeroX不存在。如何做到這一點，我可以添加更多的輸入字段到POST？

Answer 1

在#add-telclick處理程序中創建的HTML不附加到document中的現有<form>元素。生成的HTML被附加到div#cad-telefone。當提交現有的<form>時，包含<input>元素的動態創建的HTML不是HTML中現有<form>元素的子節點。

可以將HTML追加到現有<form>元件在document，或創建並附加新<form>爲HTML的每個集合然後<input>元件所生成的HTML附加到新<form>元件。