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>

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

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

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

1 个答案: