Limit inputs dynamically

Question

Limit inputs dynamically

Navigation

#1 by (4 votes)

2

I'm a little new to jQuery and would like to know how I can restrict the size of input dynamically inserted.

An example: In the code below, the user can insert as many% s as you want, but I wanted to limit these inserts.

Is it possible to do this within 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><scripttype="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>

follow a link for a better view: link

php html jquery

asked by anonymous 23.08.2016 / 22:16

1 answer

Alternative for If / Else Correct way to make a large inner join

score 4 · Answer 1

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

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

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

Here's how you get by copying the logic for inserting rows (I've 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 modified fiddle: link