Question

我有一个带有输入type = text的html表单。我可以克隆每个输入，但我想恢复名称以在我的数据库中插入信息。因此，我必须增加所有名称。我只能增加一种输入而不是多种输入。

    <body>

        <button id="clone">Cloner</button>
        <button id="removebutton">Remove</button>


        <form id="myForm">

            <div class="equipment" id="eqp">
                    <h4 class="title4">EQUIPEMENT 1 / EQUIPMENT 1</h4>
                        <label>Date de prêt / Loan date:</label>
                        <input type="text" name="loandate" id="datepicker" placeholder="ex: 20170101"/><br/><br/>

                        <label>Nom du produit / Product Name:</label>
                        <input type="text" name="productname" placeholder="ex: Asus"/><br/><br/>

                        <label>Type:</label>
                        <input type="text" name="type"/><br/><br/>

                        <label>Numéro de série / Serial Number:</label>
                        <input type="text" name="serialnumber" placeholder="ex: A003565DS65"/><br/><br/>

                        <label>Statuts / Status:</label>
                        <select name="status">
                            <option>gg</option>
                            <option>hh</option>
                        </select><br/><br/>             
            </div>

        </form>


    </body>
</html>

JS：

$('#clone').click(function () {

    $('#myForm').append($('#eqp:last').clone());
    $('#myForm div').each(function (i) {
        var textinput1 = $(this).find('input');
        var textinput2 = $(this).find('input[text="productname"]');

        var select = $(this).find('select');

        i++;
        textinput1.eq(0).attr('name', 'loandate' + i);
        select.eq(0).attr('name', 'status' + i);
    });

});

$("#removebutton").click(function() {
    if ($('.equipment').length > 1)
        $('.equipment:last').remove()
});
//});

感谢您的帮助！

Answer 1

使用<input name="loandate[]" >

您不需要增加名称，您将获得结果为数组

以下是您需要更改为HTML和JS的内容：

＆＃13;

$('#clone').click(function () {

    $('#myForm').append($('.equipment:last').clone());
    $('#myForm div').each(function (i) {
       
    });

});

$("#removebutton").click(function() {
    if ($('.equipment').length > 1)
        $('.equipment:last').remove()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <button id="clone">Cloner</button>
        <button id="removebutton">Remove</button>


        <form id="myForm">

            <div class="equipment">
                    <h4 class="title4">EQUIPEMENT 1 / EQUIPMENT 1</h4>
                        <label>Date de prêt / Loan date:</label>
                        <input type="text" name="loandate[]" id="datepicker" placeholder="ex: 20170101"/><br/><br/>

                        <label>Nom du produit / Product Name:</label>
                        <input type="text" name="productname[]" placeholder="ex: Asus"/><br/><br/>

                        <label>Type:</label>
                        <input type="text" name="type[]"/><br/><br/>

                        <label>Numéro de série / Serial Number:</label>
                        <input type="text" name="serialnumber[]" placeholder="ex: A003565DS65"/><br/><br/>

                        <label>Statuts / Status:</label>
                        <select name="status[]">
                            <option>gg</option>
                            <option>hh</option>
                        </select><br/><br/>             
            </div>

        </form>

＆＃13;

请注意你的html中有错误。设备div元素具有ID（#eqp）。克隆该div后，您将获得具有相同ID的多个元素。（那不好）。

您需要改变的是：

删除该ID并使用类选择器
像这样编辑表单名称：name[]
简化您的JS。无需为每个元素设置不同的名称
使用它们作为数组进入PHP操作。

PHP示例：

$i = 0;

do{

    $loandate = $_POST['loandate'][$i];
    $type = $_POST['type'][$i]
    //...

    $i++;

}while(isset($_POST['loandate'][$i]))

如何通过克隆增加输入名称？

1 个答案: