[Resolvido] Adicionar / remover campos dinamicamente
-- Tópico editado e movido --
Devido à grande quantidade de dúvidas, achei prudente mover esse tópico do Laboratório de Scripts para o fórum principal. Muitos usuários não souberam como recuperar os dados em PHP e isso foi devido à falha minha, por eu não ter postado antes o script em PHP (entretando mostrei um exemplo no post #13 a seguir).
Peço sinceras desculpas pelo transtorno.
Movido:
JavaScript/DHTML: Laboratório de Scripts :seta: JavaScript/DHTML: Fórum principal
--Tópico original--
Olá pessoal!
Uma aplicação interessante do JavaScript é a criação de campos input (text, hidden, button, dentre outros) dinamicamente, ou seja, o usuário entra no seu site e pode, conforme a situação, criar ou apagar campos pré-existentes.
Isso é muito utilizado em sistemas de e-mails, ou outros sistemas de "uploads", no qual é exibido um campo "texto" e um botão com o valor "Adicionar campo" (por exemplo), para que o usuário possa upar mais de um arquivo de cada vez.
Muitas vezes, esses sistemas não possuem a opção de "Apagar campo", mas isso é uma característica do sistema, que procurei não repetir no código abaixo. Logo, o código que estou disponibilizando a seguir, contém, na frente de todo campo "texto" recém-criado, um botão para apagá-lo, caso não seja mais necessário.
Por fim, adicionei um campo "hidden" (que está, apenas para título de demonstração, como "text") que enviará via POST, para a página PHP ou ASP por exemplo, uma string contendo quais os campos foram realmente enviados. Desse modo, fica mais fácil controlar no script ASP ou PHP o nome das variáveis que forem sendo criadas.
Observação: Não tive tempo de testar no Firefox. No IE7 e Opera 9.52 ocorreu tudo bem!
Para testar o script (corrigido), basta copiar todo o código a seguir e colar em seu editor HTML preferido:
<html> <head> <title>java script: Adicionar e remover campos dinamicamente!</title> <script language="JavaScript" type="text/javascript"> /*Script desenvolvido por: klonderPostagem exclusiva em: [http://www.forum.imasters.com.brLiberado](http://www.forum.imasters.com.brLiberado) para uso e modificação.*///Não altere esses valores!var iCount = 0;var iCampos = 1;var hidden1; //Definindo quantos campos poderão ser criados (máximo);var iCamposTotal = 5; //Função que adiciona os campos;function addInput() { if (iCampos <= iCamposTotal) { hidden1 = document.getElementById("hidden1"); //Criando uma variável que armazenará as informações da linha que será criada. //Os campos estão sendo colocados no interior de uma div, pois a linha contém muitos elementos; //Basta excluir a div, para excluir todos os elementos da linha; var texto = "<div id='linha"+iCount+"'><input type='text' name='texto"+iCount+"' id='texto"+iCount+"' value='Meu texto "+iCount+"'><input type='button' value='Apagar campo' onClick='removeInput("linha"+iCount+"")'></div>"; //Capturando a div principal, na qual os novos divs serão inseridos: var camposTexto = document.getElementById('camposTexto'); camposTexto.innerHTML = camposTexto.innerHTML+texto; //Escrevendo no hidden os ids que serão passados via POST; //No código ASP ou PHP, você poderá pegar esses valores com um split, por exemplo; if (hidden1.value == "") { document.getElementById("hidden1").value = iCount; }else{ document.getElementById("hidden1").value += ","+iCount; }iCount++;iCampos++;} } //Função que remove os campos;function removeInput(e) { var pai = document.getElementById('camposTexto'); var filho = document.getElementById(e); hidden1 = document.getElementById("hidden1"); var campoValor = document.getElementById("texto"+e.substring(5)).value; var lastNumber = hidden1.value.substring(hidden1.value.lastIndexOf(",")+1); if(confirm("O campo que contém o valor:n» "+campoValor+"nserá excluído permanentemente!nnDeseja prosseguir?")){ var removido = pai.removeChild(filho); //Removendo o valor de hidden1: if (e.substring(5) == hidden1.value) { hidden1.value = hidden1.value.replace(e.substring(5),""); }else if(e.substring(5) == lastNumber) { hidden1.value = hidden1.value.replace(","+e.substring(5),""); }else{ hidden1.value = hidden1.value.replace(e.substring(5)+",",""); } iCampos--; }}</script> </head> <body> <form name="my_form" id="my_form" action="" method="post"> <input type="button" value="Criar campo texto" name="add_input" id="add_input" onClick="addInput();"> <div id="camposTexto"></div><br><br>Ajuste o campo abaixo para "hidden" no código-fonte.<br>O valor passado será utilizado na página ASP ou PHP, por exemplo, servindo de controle dos ids passados:<br><input type="text" name="hidden1" id="hidden1" value=""></form> </body> </html>Abraços a todos!
Discussão (47)
Carregando comentários...