来自动态添加的输入字段时未发送的帖子数据答案

【问题标题】：Post data not being sent when it comes from dynamically added input field来自动态添加的输入字段时未发送的帖子数据
【发布时间】：2018-01-16 17:50:55
【问题描述】：

我有一个表单来注册无限数量的电话号码，我在其中根据用户需要动态添加更多输入字段，因此它被定义为（使用 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 添加更多输入字段？

【问题讨论】：

标签： javascript php jquery html laravel

【解决方案1】：

在 #add-tel click 处理程序中创建的 HTML 未附加到 document 中的现有 <form> 元素。生成的 HTML 附加到 div#cad-telefone。提交现有<form> 时，动态创建的包含<input> 元素的HTML 不是HTML 中现有<form> 元素的子节点。

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

【讨论】：

谢谢，就是这样。我认为仅将其添加到 <form>...</form> 的限制内就足够了，但事实并非如此。