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

时间:2017-02-06 15:40:26

标签: javascript jquery

我有一个带有输入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()
});
//});

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

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

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

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

&#13;
&#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;
&#13;
&#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]))