Limit the number of fields with Jquery

Question

Limit the number of fields with Jquery

Navigation

#1 by (3 votes)

1

I'm doing size registration on a system as follows:

Itisworkingperfectly,butInowneedtolimittheinclusionofupto03Sizes,butIcannotdoit.Hereisthecode:

<tableborder="0">
    <tr class='linhas'>
        <td  style="padding: 5px"><input type="text" name="Cores[]" class="form-control" placeholder="Cor do Produto" value=""></td>
        <td  style="padding: 5px"><input type="text" name="Tamanho[]" class="form-control" placeholder="Tamanho" value=""></td>
        <td  style="padding: 5px"><input type="number" name="EstoqueProd[]" class="form-control pull-left" placeholder="Estoque" min="1" value=""></td>
        <td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
    </tr>
    <tr>
        <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais tamanhos</button></td>
    </tr>
</table> 

<script type="text/javascript">
     $(function () {
       function removeCampo() {
             $(".removerCampo").unbind("click");
             $(".removerCampo").bind("click", function () {
                if($("tr.linhas").length > 1){
                     $(this).parent().parent().remove();
                }
             });
       }

       $(".adicionarCampo").click(function () {
             novoCampo = $("tr.linhas:first").clone();
             novoCampo.find('input[type="text"]').val("");
             novoCampo.find('select').val("");
             novoCampo.insertAfter("tr.linhas:last");
             removeCampo();
       });
     });
 </script>

jquery

asked by anonymous 06.12.2017 / 21:27

1 answer

Show window without frameworks How to escape the SqlDataSource.FilterExpression?

score 3 · Accepted Answer

In the event of the adicionarCampo button count the number of fields you already have in the DOM:

$(".adicionarCampo").click(function () {
    if ($('.linhas').length < 3) {
        novoCampo = $("tr.linhas:first").clone();
        novoCampo.find('input[type="text"]').val("");
        novoCampo.find('select').val("");
        novoCampo.insertAfter("tr.linhas:last");
        removeCampo();
    }
});