Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

klonder

[Resolvido] Adicionar / remover campos dinamicamente

Por , em Javascript

Recommended Posts

klonder    14

klonder
Postado

-- 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 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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

DarkFlames    0

DarkFlames
Postado

Olá, eu estou usando esse código e adaptando ele ao meu sistema, mas tem um problema, se eu tiver colocado informações nos campos e quiser adicionar mais campos logo depois, ele elimina os dados que eu havia inserido nos campos e to quebrando a cabeça para resolver isso, teria uma idéia de como fazer? Obrigado !!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lúcio Gomes    0

Lúcio Gomes
Postado

Olá, eu estou usando esse código e adaptando ele ao meu sistema, mas tem um problema, se eu tiver colocado informações nos campos e quiser adicionar mais campos logo depois, ele elimina os dados que eu havia inserido nos campos e to quebrando a cabeça para resolver isso, teria uma idéia de como fazer? Obrigado !!

Realmente, estou com esse mesmo problema.

 

Poderia nos ajudar a resolver?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Colla    0

Colla
Postado

Existe a possibilidade de adaptar esse código a uma linha de nota fiscal, por exemplo:

 

Campos input:

 

id

produto

valor unitário

valor total

 

Conforme eu quiser adicionar mais de um produto na nota, eu adiciono uma nova linha com novos campos, 4 no total.

 

Tem como?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Realmente pessoal... no Internet Explorer funcionou muito bem... mas eu não havia testado no Firefox Mozilla. No FF ele realmente apaga o valor dos campos que já foram preenchidos anteriormente, ao adicionar outro campo.

 

Fiquei hoje o dia inteiro pensando em como resolver essa situação, tanto para o IE quanto para o FF.

Consegui desenvolver um código que está funcionando bem em Javascript, mas não tive como testar ainda com a linguagem server-side. Quem testar, por gentileza, poste o ocorrido aqui, ok? Vamos melhorar esse código quantas vezes necessário até que não haja nenhum bug. Conto com a participação de vocês!

 

O código abaixo já está comentado:

<html>
<head>
<script type="text/javascript">
//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;

//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;


function AddCampos() {
var hidden1 = document.getElementById("hidden1");
var hidden2 = document.getElementById("hidden2");

//Executar apenas se houver possibilidade de inserção de novos campos:
if (iCount < totalCampos) {

//Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
hidden2.value = "";

//Atualizando a lista dos campos que estão ocultos.
//Essa lista ficará armazenada temporiariamente em hidden2;
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
        if (document.getElementById("linha"+iLoop).style.display == "none") {
                if (hidden2.value == "") {
                        hidden2.value = "linha"+iLoop;
                }else{
                        hidden2.value += ",linha"+iLoop;
                }
        }
}
//Quebrando a lista que foi armazenada em hidden2 em array:

linhasOcultas = hidden2.value.split(",");


        if (linhasOcultas.length > 0) {
                //Tornar visível o primeiro elemento de linhasOcultas:
                document.getElementById(linhasOcultas[0]).style.display = "block"; iCount++;
                
                //Acrescentando o índice zero a hidden1:
                if (hidden1.value == "") {
                        hidden1.value = linhasOcultas[0];
                }else{
                        hidden1.value += ","+linhasOcultas[0];
                }
                
                /*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
                if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
                        hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
                }else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
                        hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
                }else{
                        hidden2.value = "";
                }
                */
        }
}
}

function RemoverCampos(id) {
//Criando ponteiro para hidden1:        
var hidden1 = document.getElementById("hidden1");

//Pegar o valor do campo que será excluído:
var campoValor = document.getElementById("arq"+id).value;
        //Se o campo não tiver nenhum valor, atribuir a string: vazio:
        if (campoValor == "") {
                campoValor = "vazio";
        }

    	if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído!\n\nDeseja prosseguir?")){
                document.getElementById("linha"+id).style.display = "none"; iCount--;
                
                //Removendo o valor de hidden1:
                if (hidden1.value.indexOf(",linha"+id) != -1) {
                        hidden1.value = hidden1.value.replace(",linha"+id,"");
                }else if (hidden1.value.indexOf("linha"+id+",") == 0) {
                        hidden1.value = hidden1.value.replace("linha"+id+",","");
                }else{
                        hidden1.value = "";
                }
        }
}
</script>
</head>
<body>
<form name="form1" action="paginaPHPouASP" method="post">

<script type="text/javascript">
//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
        document.write("<span id='linha"+iLoop+"' style='display:none'>Arquivo "+iLoop+": <input type='text' id='arq"+iLoop+"' name='arq"+iLoop+"'> <input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></span>");
}
</script>

<input type="button" value="Adicionar campos" onclick="AddCampos()">
<br><br>Atenção!!! No código fonte, altere o "text" do campo abaixo para "hidden":
<br><br><input type="text" name="hidden1" id="hidden1">
<br>Esse campo do tipo "hidden" irá passar a id dos campos que foram criados. Na página ASP ou PHP (ou outra linguagem server-side) você poderá dar um split para recuperar o valor dos campos que foram passados!


<input type="hidden" name="hidden2" id="hidden2">
</form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gilbnet    4

gilbnet
Postado

to precisando de um cod desses ai mas com radio pra pegar com o php, ,mas o php pelo que entendo do radio pega só o valor do radio setado, como pegar um array?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Que array amigo ?

Se você quiser vários valores, use checkbox, e não radios.

A diferença de um para o outro, é esta. checkbox permite selecionar vários, e rádio apenas um de um grupo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Ia postar um script que acabei de fazer - para estudos - que tem a mesma finalidade do seu, mas você já postou o seu... ahuahuahauhuahauhuah Mas gostaria de compartilhar o jeito que eu fiz:

/* * Desenvolvido por: Thiago Retondar * Data: 04/12/2009 *  * Como usar: * 		todo o script se baseia nos parâmetros, logo você só terá que defini-los. Sâo eles: * 			formID » valor do tipe ID que recebe o formulário * 			buttonAdd » valor do tipo ID que recebe o botão para adicionar; * 			textButtonRemove » valor do tipo STRING que especifíca o texto que aparecerá no botão de excluir campo * 			maxInputs » valor do tipo inteiro que especifíca o máximo de campos a serem criado * 			minInputs » valor do tipo inteiro que especifíca o mínimo de campos, no documento, depois de criados * 			textLabel » valor do tipo STRING que especifíca o texto que aparecerá no label */window.onload = function(){	addRemoveInput("upload", "btnAdd", "Deletar Campo!", 10, 2, "URL ");};function addRemoveInput(formId, buttonAdd, textButtonRemove, maxInputs, minInputs, textLabel){	var form = document.getElementById(formId);	var btnAdd = document.getElementById(buttonAdd);	var inputs = 0;	var labels = document.getElementsByTagName("label");		btnAdd.onclick = addInput;		function addInput(){		if(labels.length < maxInputs){			++inputs;						var label = document.createElement("label");			var input = document.createElement("input");			var btnRemove = document.createElement("input");						label.innerHTML = textLabel + inputs;			input.setAttribute("type", "text");			btnRemove.setAttribute("type", "button");			btnRemove.setAttribute("value", textButtonRemove);						label.appendChild(input);						if(labels.length < minInputs){ 				form.appendChild(label);			} else{				label.appendChild(btnRemove);				form.appendChild(label);			}			btnRemove.onclick = removeInput;					} else alert("Você pode adicionar até " + maxInputs + " campos!");	}	function removeInput(){		if(labels.length == minInputs + 1){			inputs--;			alert("Você deve deixar no mínimo " + minInputs + " campo(s)!");			form.removeChild(this.parentNode);		} else{			inputs--;			form.removeChild(this.parentNode);		}	}}
Exemplo online » http://thiagotestes.site90.com/javascript/createInput/

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

AlexSandroJAP    0

AlexSandroJAP
Postado

Olá Amigos, estou precisando exatamente disso, porem com mais campos. Comecei tentando adaptar o primeiro código alterando apenas a linha onde criar o input:

var texto = "<div id='linha"+iCount+"'><label><input type='text' name='nomeDepend"+iCount+"' id='nomeDepend"+iCount+"' class='metadeDep' value='oi"+iCount+"' /><select name='parentesco"+iCount+"' id='parentesco"+iCount+"' class='metadeMeia'><option selected='selected'></option><option>Conjuge</option><option>Filho</option><option>Pai</option></select>Data Nasc<input type='text' name='dataDeNascDepend"+iCount+"' id='dataDeNascDepend"+iCount+"' class='metadeData' /></label><input type='button' value='Apagar campo' onclick='removeInput(\"linha"+iCount+"\")'></div>";

ele criar legal, porem nao apaga e nao estou conseguindo descubrir o pq. Alguem poderia me ajudar?

 

Já o segundo (do Thiago) eu nem consegui identificar onde esta sendo criar o input rs...fiquei admirado com o codigo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

O meu é tudo criado no JavaScript. Mais especificamente nesse trecho:

function addInput(){                if(labels.length < maxInputs){                        ++inputs;                                                var label = document.createElement("label");                        var input = document.createElement("input");                        var btnRemove = document.createElement("input");                                                label.innerHTML = textLabel + inputs;                        input.setAttribute("type", "text");                        btnRemove.setAttribute("type", "button");                        btnRemove.setAttribute("value", textButtonRemove);                                                label.appendChild(input);                                                if(labels.length < minInputs){                                 form.appendChild(label);                        } else{                                label.appendChild(btnRemove);                                form.appendChild(label);                        }                        btnRemove.onclick = removeInput;                                        } else alert("Você pode adicionar até " + maxInputs + " campos!");        }

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado

Klonder, teve uma coisa que eu não consegui entender. Quando eu recupero o valor de hidden em outra pagina, supondo que eu adicionei 4 campos, ele me retorna uma sucessão de linhas1 e linhas2. Em seu código tem muitas linhas que tratam disso, logo não identifiquei exatamente onde modifica-las. Se você pudesse me apontar ou dar uma solução para isso, resolveria e miuto meu problema.

 

No mais, os dois sistema estão de parabéns, obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Opa, beleza...

 

Pessoal, vou então demonstrar mais uma maneira de como criar campos dinamicamente, voltando ao createElement, mas agora incluindo um script em PHP para mostrar como pegar os dados:

 

Javascript + Formulário em HTML:

<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;

function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);

//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='campo"+qtdeCampos+"' name='campo[]' value='Campo com id: "+qtdeCampos+"'> <input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}

function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);

//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
</head>
<body>
<form name="form1" action="pegardados.php" method="post">
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onclick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>

Página pegardados.php:

Recuperando os valores que foram enviados pelo form:

<?php
if(isset($_POST["campo"])) {
    echo "Os campos que você adicionou são:<br><br>";
    
    // Faz loop pelo array dos campos:
    foreach($_POST["campo"] as $campo) {
        echo $campo."<br>";
    }
}else{
	echo "Você não adicionou dados em nenhum campo!";
}
?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mariana Sousa    0

Mariana Sousa
Postado

Olá, tinha postado minha dúvida em outro tópico,pois não tinha achado esse.

 

Não entendo muito de javascript, então gostaria de saber se alguem pode me ajudar.

 

Tenho o seguinte código:

 

<tr>

   <td colspan="2"><p>Contatos</p></td> 

</tr>



<tr>

      <td width="139">Nome:</td>

      <td width="651"><input name="nome" type="text" id="nome" size="40" maxlength="60" /> </td>

    </tr>

    

    <tr>

      <td>Endereço Eletronico:</td>

      <td><input name="email" type="text" id="email" size="40" maxlength="40" />

    </tr>


      <tr>

      <td>Telefone:</td>

      <td><input name="telefone" type="text" id="telefone" size="16" maxlength="14" onkeypress="return digitos(event, this);" onkeyup="Mascara('TEL',this,event);" /> </td>

    </tr>

    

      <tr><td>Cargo:</td>

      <td><input name="cargo" type="text" id="cargo" size="20" maxlength="30" /> </td>

    </tr>

Gostaria que ao clicar no botão adicionar aparecem outros campos iguais, e que ao clicar em "enviar" ao final do formulários todos os campos fossem adicionados ao bd msql.

 

Não entendi como posso fazer isso com os códigos desse tópico, se alguém poder me ajudar ficarei agaradecida.^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Dall'Agnol    0

Douglas Dall'Agnol
Postado

Consegui fazer funcionar com fieldsets!

 

 

<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;

function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);

//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<fieldset><legend>Cursos Realizados</legend><label>Curso: <input type='text' id='curso"+qtdeCampos+"' name='campo[]'></label><br /><label>Local: <input type='text' id='local"+qtdeCampos+"' name='campo[]'></label><br /> <label>Nivel: <input type='text' id='nivel"+qtdeCampos+"' name='campo[]'></label><br /> <label>Carga Horária: <input type='text' id='carga"+qtdeCampos+"' name='campo[]'></label><br /></fieldset> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Apagar campo'>";
qtdeCampos++;
}

function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);

//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
<title>Formulário de Cadastro</title></head>
<body>
<form name="form1" action="pegardados.php" method="post">
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onClick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>

 

 

O arquivo pegardados.php pega os dados. Mas e pra enviar esses dados por email agora :S

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito