2

Sou um pouco nova em jQuery e gostaria de saber como eu faço para limitar o tamanho dos input inseridos dinamicamente.

Um exemplo: no código a baixo o usuário pode inserir quantos inputs quiser, porém eu queria que limitasse esses inserts.

E possivel fazer isso dentro do jQuery?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adicionando linhas dinamicamente</title>
<style type="text/css" media="all">
  body{ font-family:Arial, Helvetica, sans-serif }
  #tudo{ border:#CCCCCC 1px solid;width:680px;margin:0 auto }
  .bd_titulo{
    text-align:center;
    background-color:#CCCCCC;
    font-weight:bold
  }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<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").val("");
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
</script>

</head>


<body>
<form method="post" name="frm_campo_dinamico" action="">
<div id="tudo">
<table border="0" cellpadding="2" cellspacing="4">


  <tr><td class="bd_titulo" width="10">Qtde</td><td class="bd_titulo">Descrição</td><td class="bd_titulo">Cor</td><td class="bd_titulo">Valor R$</td></tr>
  <tr class="linhas">
    <td><input type="text" name="qtd[]" style="text-align:center" /></td>
    <td><input type="text" name="descricao[]" /></td>
    <td>
      <select name="cor[]">
        <option value="" selected="selected">Selecione uma cor...</option>
        <option value="Amarelo">Amarelo</option>
        <option value="Branco">Branco</option>
        <option value="Cinza">Cinza</option>
        <option value="Verde">Verde</option>            
      </select>
    </td>
    <td><input type="text" name="valor[]" style="text-align:center" /></td>
    <td><a href="#" class="removerCampo" title="Remover linha"><img src="images/minus.png" border="0" /></a></td>
  </tr>
  <tr><td colspan="4">
        <a href="#" class="adicionarCampo" title="Adicionar item"><img src="images/plus.png" border="0" /></a>
    </td></tr>
  <tr>
        <td align="right" colspan="4"><input type="submit" id="btn-cadastrar" value="Cadastrar" /></td>
  </tr> 
</table>
</form>
</div>

</body>
</html>

segue um link para visualizar melhor: https://jsfiddle.net/78e4fznm/

1 Resposta 1

4

Basta usar a mesma lógica que usou ao remover o campo:

...
if($("tr.linhas").length > 1){
...

Este teste serve para remover apenas se o número de linhas for maior que um.

Veja como fica copiando a lógica para a inserção de linhas (limitei a 5 como exemplo):

$(".adicionarCampo").click(function () {
  if($("tr.linhas").length < 5) {
    novoCampo = $("tr.linhas:first").clone();
    novoCampo.find("input").val("");
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  }
});

Segue o fiddle alterado: https://jsfiddle.net/hgoc4p9v/

7
  • Muito Obrigada, fiquei tanto tempo pra aprender o resto que as vezes coisa simples, esquecemos rsrsrs. Muito obrigada pela ajuda. 23/08/2016 às 20:21
  • Seja bem-vinda, é legal a hora que tiver um tempinho dar uma lidinha no Tour e Central de ajuda para conhecer melhor os recursos do site.
    – Largato
    23/08/2016 às 20:23
  • E qual seria sintaxe se eu pegasse esse limite que está inserido em uma variavel php ? 23/08/2016 às 20:24
  • Depende do código original. Poderia colocar if($("tr.linhas").length < <?php echo $quantidade; ?>) { ...
    – Largato
    23/08/2016 às 20:27
  • Consegui aqui Bacco, muito obrigada, coloquei uma variavel var totalCampos = <?=$XX?>; e dps chamei ela dentro do codigo , rsrs, muito Obrigada 23/08/2016 às 20:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .