Ir para conteúdo

POWERED BY:

Arquivado

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

Adimilton

Criar INPUT dinamicamente no form

Por , em Javascript

Recommended Posts

Adimilton    0

Adimilton
Postado

Gostaria de saber como criar inputs dinamicamente no form de acordo com dados passados pelo usuário.

ex: tenho um select com as opções ('cpf|nome|fone', 'cnpj|ie|razao', 'id|nota', 'matricula'). dependendo a escolha do usuário terei que criar os campos de acordo com a seleção. tipo, se ele ecolher a terceira opção terei que criar no form os input (id e nota).

Compartilhar este post

Link para o post
Compartilhar em outros sites

lls98    2

lls98
Postado

Usa If e Else rapaz,

Se o cara passar o dado A tu cria um input X, dado B input Y...

Coisa boba, você pode utilizar If Else e o DOM.

 

É só atribuir os campos a uma variável(DOM), e fazer a verificação com If(exemplo: if(variavel=nome)), depois tu constrói os inputs conforme as respostas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando Neto MH    13

Fernando Neto MH
Postado

Cara beleza?

Fiz um código aqui veja se isto que você quer se for me reputa ai beleza :thumbsup:/> 

<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head><script>
	function chamaFuncao(NOME){
		if(NOME == 'cpf_nome_fone'){//SE FOR IGUAL A CPF NOME E FONE
			document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV
			$('#campo').append('CPF:<input type="text" name="cpf" id="cpf" /><br>Nome:<input type="text" name="nome" id="nome" /><br>Fone:<input type="text" name="fone" id="fone" />');// ADICIONA OS ELEMENTOS NA DIV
		}
		else if(NOME == 'cnpj_ie_razao'){//SE FOR IGUAL A CNPJ IE E RAZÃO
			document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV
			$('#campo').append('CNPJ:<input type="text" name="cnpj" id="cnpj" /><br>IE:<input type="text" name="IE" id="IE" /><br>RAZÃO:<input type="text" name="razao" id="razao" />');// ADICIONA OS ELEMENTOS NA DIV
		}
		else if(NOME == 'id_nome'){//SE FOR IGUAL A ID E NOME
			document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV
			$('#campo').append('ID:<input type="text" name="ID" id="ID" /><br>NOTA:<input type="text" name="NOTA" id="NOTA" />');// ADICIONA OS ELEMENTOS NA DIV
		}else{//SE NÃO FOR IGUAL A NENHUM DE CIMA
			document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV
			$('#campo').append('MATRICULA:<input type="text" name="MATRICULA" id="MATRICULA" />');// ADICIONA OS ELEMENTOS NA DIV
		}
	}
</script>
<body>
<select name="paginas" onchange="javascript: chamaFuncao(this.value)">
<option selected="selected" disabled="disabled">Selecione..</option>
<option value="cpf_nome_fone">CPF, NOME E FONE</option>
<option value="cnpj_ie_razao">CNPJ, IE E RAÇÃO</option>
<option value="id_nome">ID E NOTA</option>
<option value="matricula">MATRICULA</option>
</select>
<div id="campo">
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ViniciusMachado    0

ViniciusMachado
Postado
Cara beleza?Fiz um código aqui veja se isto que você quer se for me reputa ai beleza :thumbsup:/> 


 


 


 



Untitled Document


 


 



		function chamaFuncao(NOME){



			if(NOME == 'cpf_nome_fone'){//SE FOR IGUAL A CPF NOME E FONE



				document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV



				$('#campo').append('CPF:Nome:Fone:');// ADICIONA OS ELEMENTOS NA DIV



			}



			else if(NOME == 'cnpj_ie_razao'){//SE FOR IGUAL A CNPJ IE E RAZÃO



				document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV



				$('#campo').append('CNPJ:IE:RAZÃO:');// ADICIONA OS ELEMENTOS NA DIV



			}



			else if(NOME == 'id_nome'){//SE FOR IGUAL A ID E NOME



				document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV



				$('#campo').append('ID:NOTA:');// ADICIONA OS ELEMENTOS NA DIV



			}else{//SE NÃO FOR IGUAL A NENHUM DE CIMA



				document.getElementById("campo").innerHTML=""; //APAGA O CONTEUDO DA DIV



				$('#campo').append('MATRICULA:');// ADICIONA OS ELEMENTOS NA DIV



			}



		}


 


 


 



Selecione..



CPF, NOME E FONE



CNPJ, IE E RAÇÃO



ID E NOTA



MATRICULA


 


 


 


 








 



Kra, muito legal o que vc fez, pena que a pessoa que estava com duvida nao se manifestou. Queria uma ajuda sua para algo parecido. Eu tenho um from de cadastro de pedidos onde a pessoa digita NOME, PRODUTO, VALOR, QUANTIDADE. Queria que tivesse um botaozinho de + para adicionar dinamicamente novos campos PRODUTO, VALOR e QUANTIDADE, assim o usuário poderia ir incluindo quantos campos forem necessários para adicionar novos produtos na mesma solicitação de pedido. Sou bem leigo em quase tudo, tenho me virado bem baixando códigos e entendendo sua lógica, mas nesse ponto estou completamente perdido.


 



Abs,



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Anderson Danilo
			  

	
		
	
			 43
	
		
	

		

		

			


	
		Anderson Danilo
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

e se você possui-se uma div base para isto, exemplo:


 


http://jsfiddle.net/andersondanilo/7JPrW/


 


<div id="divProdutoBase" style="display:none;">
    Produto: <input type="text" name="produto[]" />
    Valor: <input type="text" name="valor[]" />
    <input type="button" value="Remover" onclick="produtoList.remove(this.parentNode)" />
</div>
<form>
    <h1>Formulário</h1>
    <div id="divProdutoList">
    </div>
    <input type="button" value="Adicionar Produto" onclick="produtoList.insert()" />
</form>


 


 


Javascript:


var produtoList = {
    'init': function()
    {
        this.divProdutoList = document.getElementById('divProdutoList');
        this.divProdutoBase = document.getElementById('divProdutoBase');
    },
    
    'insert': function()
    {
        var newDiv = this.divProdutoBase.cloneNode(true);
        newDiv.style.display = '';
        console.log('newDiv => ', newDiv);
        this.divProdutoList.appendChild(newDiv);
    },
    
    'remove': function(el)
    {
        el.parentNode.removeChild(el);
    }
};
produtoList.init();



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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