11

Implementei um script que adiciona dinâmicamente campos num formulário, no caso um formulário para adicionar produtos e a respectiva quantidade do mesmo.

O código está aqui: http://jsfiddle.net/3Lzcn7dc/

Estou achando esse código muito burocrático, pois toda vez que o botão "NovoProduto" é acionado, é necessário fazer:

  1. Clonar a div item
  2. Alterar o id da div e dos campos produtoId e quant
  3. Usar um contador para incrementar os ids e names, para garantir que não sejam iguais
  4. Usar um atributo hidden (itemCont) para passar para o servidor a quantidade de novos produtos que foram criados, para saber quantas vezes terei que chamar $_POST["produtoId__"], pois pode haver centenas de produtos criados.

Gostaria da opinião dos colegas para aperfeiçoar esse código, tornando-o mais enxuto. Abaixo segue o código:

HTML:

<form action="cadastro.php" method="post" id="formulario">
    <input type="button" id="novoProd" value="Novo produto"/>
    <input type="submit" value="enviar"/>
    <div id="item" class="item">
        <label>Selecione o produto:</label>
            <select id="produtoId" name="produtoId">
                <option value="1">Produto 1</option>
                <option value="5">Produto 2</option>
                <option value="9">Produto 3</option>
            </select>
        <label>Quantidade: </label>
        <input type="number" id="quant" name="quant"/>
    </div>
    <input type="hidden" id="itemCont" value="1"/>
</form>

JAVASCRIPT:

$(document).ready(function(){
    var itemCont = 1;
    $("#novoProd").click(function(){
        var novoItem = $("#item").clone();

        // modifica o id do item recem criado
        $(novoItem).attr("id","item"+itemCont);
        var novoSelect = $(novoItem).children()[1];
        $(novoSelect).attr("id","produtoId"+itemCont);
        $(novoSelect).attr("name","produtoId"+itemCont);

        var novoSelect = $(novoItem).children()[3];
        $(novoSelect).attr("id","quant"+itemCont);
        $(novoSelect).attr("name","quant"+itemCont);

        $("#formulario").append(novoItem);
        itemCont++;
        $("#itemCont").val(itemCont);
    });
  });
1
  • Recentemente tive a mesma necessidade e cheguei na mesma solução: Utilizando o clone. Não acho que o código seja burocrático. obs: A diferença é que utilizava ASP.net MVC Commented 7/11/2014 às 19:04

2 Respostas 2

8

Uma sugestão seria utilizar os nomes dos inputs como Array e tratar no PHP, exemplo:

$(document).ready(function() {
      $("#novoProd").click(function() {
      var novoItem = $("#item").clone().removeAttr('id'); // para não ter id duplicado
      novoItem.children('input').val(''); //limpa o campo quantidade
      $("#formulario").append(novoItem);
    });
  });
input[type="number"] {
  width: 50px;
}
label {
  font-weight: bold;
  margin-left: 10px;
}
div.item {
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="cadastro.php" method="post" id="formulario">
  <input type="button" id="novoProd" value="Novo produto" />
  <input type="submit" value="enviar" />
  <div id="item" class="item">
    <label>Selecione o produto:</label>
    <select name="produtoId[]">
      <option value="1">Produto 1</option>
      <option value="5">Produto 2</option>
      <option value="9">Produto 3</option>
    </select>
    <label>Quantidade:</label>
    <input type="number" name="quant[]" />
  </div>
</form>

PHP

No PHP você faz um foreach no POST[produtoId] para fazer o insert na base

foreach ($_POST['produtoId'] as $key=> $value){
    echo $value; // Id do produto
    echo $_POST['quant'][$key]; // Quantidade
}

Isto evitaria as manipulações nos id's dos input's, reduzindo seu código jQuery e de certa forma simplificando o insert com PHP.

13
  • 1
    nesse caso o campo itemCont pode ser eliminado também
    – Savrige
    Commented 7/11/2014 às 19:22
  • 1
    @Borachio, correto acabei de editar
    – abfurlan
    Commented 7/11/2014 às 19:25
  • 1
    Sim, a solução ficou muito mais limpa.
    – Savrige
    Commented 7/11/2014 às 19:41
  • 1
    @AlexandreLopes ficaria mais ou menos assim. jsfiddle.net/af2t19k7/1, tem um problema se remover o primeiro, mas vc pode pensar em como tratar isso, mostrei apenas um exemplo.
    – abfurlan
    Commented 19/02/2021 às 14:02
  • 1
    @AlexandreLopes outra versão tratando o erro citado acima: jsfiddle.net/vx4j0myk
    – abfurlan
    Commented 19/02/2021 às 14:17
0

Rapaz, fazer isso mais dinâmico você teria que escrever mais códigos. Mas os elementos poderiam ser removidos do seu html. Mas quando vou fazer algo do tipo que preciso de id dinâmico. Faço assim:

$(document).ready(function(){
    $("#novoProd").click(function(){
        var novoItem = $("#item").clone();
        var novoId = Math.floor((Math.random() * 100) + 1);

        // modifica o id do item recem criado
        $(novoItem).attr("id","item"+ novoId);
        var novoSelect = $(novoItem).children()[1];
        $(novoSelect).attr("id","produtoId"+ novoId);
        $(novoSelect).attr("name","produtoId"+ novoId);

        var novoSelect = $(novoItem).children()[3];
        $(novoSelect).attr("id","quant"+ novoId);
        $(novoSelect).attr("name","quant"+ novoId);

        $("#formulario").append(novoItem);
    });
  });

Ou ao invés de salvar o contador em um elemento input oculto. Você poderia criar um atributo data. Por exemplo:

<form action="cadastro.php" method="post" id="formulario">
    <input type="button" id="novoProd" value="Novo produto" data-index="1"/>
    <input type="submit" value="enviar"/>
    <div id="item" class="item" >
        <label>Selecione o produto:</label>
            <select id="produtoId" name="produtoId">
                <option value="1">Produto 1</option>
                <option value="5">Produto 2</option>
                <option value="9">Produto 3</option>
            </select>
        <label>Quantidade: </label>
        <input type="number" id="quant" name="quant"/>
    </div>
    <input type="hidden" id="itemCont" value="1"/>
</form>

$(document).ready(function(){

    $("#novoProd").click(function(){
        var itemCont = $("#novoProd").attr("data-index");
        var novoItem = $("#item").clone();

        // modifica o id do item recem criado
        $(novoItem).attr("id","item"+itemCont);
        var novoSelect = $(novoItem).children()[1];
        $(novoSelect).attr("id","produtoId"+itemCont);
        $(novoSelect).attr("name","produtoId"+itemCont);

        var novoSelect = $(novoItem).children()[3];
        $(novoSelect).attr("id","quant"+itemCont);
        $(novoSelect).attr("name","quant"+itemCont);

        $("#formulario").append(novoItem);
        itemCont++;
        $("#novoProd").attr("data-index",itemCont);
    });
  });

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 .