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:
- Clonar a div item
- Alterar o id da div e dos campos produtoId e quant
- Usar um contador para incrementar os ids e names, para garantir que não sejam iguais
- 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);
});
});