javascript - 来自动态添加的输入字段时未发送发布数据

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-tel 中创建的 HTML click处理程序未附加到现有 <form> document 中的元素.生成的 HTML 附加到 div#cad-telefone .当现有 <form>提交动态创建的 HTML，包括 <input>元素不是现有 <form> 的子节点HTML 中的元素。

您可以将 HTML 附加到现有的 <form> document 中的元素，或创建并附加一个新的 <form>对于每个 HTML 集合 <input>元素然后将生成的 HTML 附加到新的 <form>元素。