Ir para conteúdo

POWERED BY:

Arquivado

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

Thiago Web10

[Resolvido] Adcionar e Remover input

Por , em Javascript

Recommended Posts

Thiago Web10    0

Thiago Web10
Postado

Ola pessoal estou com o seguinte problema no meu formulario.

 

Eu posso Adicionar e Remover campos, so que ele funciona apenas a primeira vez.

 

ao criar os campos novamente e tentar remover ele nao remove mais.

segue o cod.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script>
function add(num)
{
	 for( i=1; i < num; i++){
	 var item = "item"+i;
   document.getElementById("add1").innerHTML += '<div id="'+item+'" style.display="block"><input type="text" name="'+item+'" id="'+item+'"><a onclick="javascript:remove(\''+item+'\');"> Remover</a><br></div>';		
}
}
function remove(num)
	{
		 alert(num);
		 document.getElementById(num).value = "";
		 document.getElementById(num).style.display="none";
	}
</script>
<form action="" method="GET">
<table align="center"  width="50%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
     <div id="menu">
      <input type="text" name="qtd" onblur="javascript:add(this.value)"/>
     </div>
   </td>
 </tr>
 <tr id="add">
   <td>
   <div id="add1"></div><br />
   <input type="submit" name="enviar" value="enviar" />
   </td>
 </tr>
</table>
</form>

o que esta errado ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo funcional com jQuery:

http://www.wbruno.com.br/blog/2011/04/01/adicionar-inputs-opcao-de-remove-los/

 

Se quiser debugar o teu, aperte Ctrl+Shif+J no Firefox. Guia:

http://www.wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Achei o erro.

 

é que você apenas esconde, você não remove os campos.

aqui:

document.getElementById(num).style.display="none";

você precisa realmente remover, se não vai constar uma duplicação de IDs no HTML virtual, e por isso o script irá se perder.

 

Tente reescrever esse trecho com um removeChild() ou algo do gênero.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Web10    0

Thiago Web10
Postado

Vlw William

 

fiz a modificação e fico assim na função de remover:

function remove(num){
 var div = document.getElementById(num);
 div.parentNode.removeChild(div);
}

 

Obrigado Pela ajuda ! =D

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