Dynamically limit inputs

Asked

Viewed 176 times

2

I’m a little young in jQuery and would like to know how I do to limit the size of input dynamically inserted.

An example: in the code below the user can enter how many inputs want, however I wanted to limit these Inserts.

It is possible to do this inside the 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>

follows a link to view better: https://jsfiddle.net/78e4fznm/

php jquery html

1 answer

4

Just use the same logic you used when removing the field:

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

This test serves to remove only if the number of lines is greater than one.

See how it is copying the logic for inserting lines (I limited to 5 as an example):

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

Follow the altered fiddle: https://jsfiddle.net/hgoc4p9v/

  • Thank you so much, I stayed so long to learn the rest that sometimes simple thing, we forgot rsrsrs. Thanks so much for the help.

  • Welcome, it’s nice to have some time to catch up on the [Tour] and [Help] to learn more about the features of the site.

  • And what would be syntax if I took this limit that is inserted in a php variable ?

  • Depends on the original code. Could put if($("tr.linhas").length < <?php echo $quantidade; ?>) { ...

  • I got here Bacco, thank you very much, I put a variable var totalCampos = <?=$XX? >; and dps called her inside the code , rsrs, thank you very much

  • Bacco, dx I ask you, still taking advantage of this code, would have put a display block ? , to appear all lines without having the need of a "boot" ?

  • The button creates the fields on the fly. If you want a fixed number, it pays to loop, or mount in PHP. This code of yours only makes sense for the variable number of fields.

Show 2 more comments

Browser other questions tagged php jquery html

You are not signed in. Login or sign up in order to post.