Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
-- 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!
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.
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!
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">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;
}
}
}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) {//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">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>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?
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.
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/](http://thiagotestes.site90.com/javascript/createInput/)
:thumbsup:Mto boa essa!
Vai ajudar muita gente... Parabéns aew Thiago :natalhappy:
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.
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: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.
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");//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>";
} echo "Você não adicionou dados em nenhum campo!";
}
?>Opa, resolvel meio mundo... /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/laugh.gif&key=fb9a849ac525d2fd317adad061adf02e38bd5f5cb2c664d803c1667dd70a2af1" alt="Imagem Postada" />
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>Não entendi como posso fazer isso com os códigos desse tópico, se alguém poder me ajudar ficarei agaradecida.^^
Continue com sua dúvida aqui :seta: http://forum.imasters.com.br/index.php?/topic/382731-adicionar-mais-campos-em-um-formulario
:thumbsup:
E para usar um fieldset com vários campos no lugar de só um input text?
É só você ir colocando o que você precisa depois do innerHTML.
^^
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");//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
Mas e pra enviar esses dados por email agora :S
PHP. Crie um tópico por lá. :thumbsup:
Ótimo.
Uma última pergunta, rs. E pra limitar a quantidade de vezes que se pode adicionar?
Coloca um tipo de contador. A cada vez que você clicar, adiciona um pro contador, quando chegar a 3 por exemplo ele para de executar a função...^^
Esse forum tá muito à frente dos meus conhecimentos, hehehe. Sou uma negação em javascript.
Tem algum exemplo aqui no fórum? Terminar esse formulário tá sendo complicado :/
Antes de var objPai coloque isso:
if(qtdeCampos==num){//onde num é o numero de vezes que devera executar a função
break;
}Deve dar resultado. Deu pra entender???
No meu código tem essa opção. Vê lá.
:thumbsup:
A.H.P
Eu coloquei conforme você disse mas não deu certo; quando clica em adicionar não acontece nada:
Segue meu código:
<html>
<head>
<script type="text/javascript">
var qtdeCampos = 0;
function addCampos() {break;
}
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");//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">
<fieldset><legend>Dados Pessoais</legend>
<label>Nome:
<input name="nome" type="text" />
</label><br />
<label>Endereço:
<input name="endereco" type="text" />
</label><br />
<label>E-Mail:
<input name="email" type="text" />
</label><br />
<label>Nascimento:
<input name="nascimento" type="text" />
</label><br />
</fieldset><br />
<div id="campoPai"></div>
<input type="button" value="Adicionar campos" onClick="addCampos()">
<br><br><input type="submit" value="Enviar">
</form>
</body>
</html>A extensão Firebug do Firefox, ao iniciar a página informa um erro:
unlabeled break must be inside loop or switch
break;\n
E sempre que clico em adicioar este erro:
addCampos is not defined
Acredito eu que é algo de errado com a forma q adicionei o código, tentei colocar a chave de fechamento } em outros locais mas não mudou.
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 !!