Criando campos automaticamente

[Isaac Sampaio 1]

Olá pessoal, estou querendo dar uma melhorada no meu formulario, mas chegeui em um ponto que o usuario deve escolher via radio se ele é pessoa FISICA ou JURIDICA e gostaria que dependendo da escolha, fosse inserido na pagina os seguinte campos para preenchimento. Se pessoa fisica = campos CPF e RG. Se pessoa juridica = campo de CNPJ....Sera que ficou claro??? Alguem sabe onde posso conseguir um exemplo???Abraço a todos.

[Isaac Sampaio 1]

Ninguem tem algo que possa ajudar???Andei procurando na net e encontrei algumas referencias que fazem efeitos proximos, mas nao exatamente o que eu preciso, estou tentando modifica-lo... Se conseguir coloco aqui o codigo que fax o que eu estou precisando..Enquanto isso estou no aguardo na ajuda dos Srs...Abracos.

Olá pessoal, estou querendo dar uma melhorada no meu formulario, mas chegeui em um ponto que o usuario deve escolher via radio se ele é pessoa FISICA ou JURIDICA e gostaria que dependendo da escolha, fosse inserido na pagina os seguinte campos para preenchimento. Se pessoa fisica = campos CPF e RG. Se pessoa juridica = campo de CNPJ....Sera que ficou claro??? Alguem sabe onde posso conseguir um exemplo???Abraço a todos.

[Isaac Sampaio 1]

Olá pessoal estou aqui mais uma vez, depois de pensar sobre a minha nescessidade me caiu a ficha de que não é preciso fazer o uso de AJAX para obter o resultado que eu preciso...Portanto como eu não manjo muito de Javascript comecei a pesquisar na net e cheguei a alguns poucos exemplos de uso da mesma na manipulacao de campos de formularios....E tentando armeguei o script que coloco abaixo. Mas um detalhe ele naum esta retorna erro algum, mas tambem nao esta funcionando... Se alguem puder me ajudar nessa tarefa ficarei extremamente grato.function criarElemento(){ var obj_form = document.getElementById("cadastra"); if(obj_form.pessoa.value == "J") { var tabela = document.getElementById("formulario"); var linha = document.createElement("tr"); var coluna = document.createElement("td"); var format = document.createElement("span"); format.className = "style10"; format.innerHTML = " Pessoa Fisica: "; coluna.appendChild(format); var coluna1 = document.createElement("td"); var opcao = document.createElement("label"); coluna1.appendChild(opcao); var campoform = document.createElement("INPUT"); campoform.setAttribute('name','cnpj'); campoform.setAttribute('type','text'); campoform.setAttribute('size','18'); campoform.setAttribute('maxlength','18'); coluna1.appendChild(campoform); linha.appendChild(coluna); linha.appendChild(coluna1); tabela.appendChild(linha); } }Chamada a funcao:<label> <input name="pessoa" type="radio" value="F" /> // Aqui ainda naum fiz a chamada a funcao porque ainda naum terminei o script na parte que trabalharia na formatacao desta escolha. </label> <span class="style10"> Pessoa Juridica: </span> <label> <input name="pessoa" type="radio" value="J" onclick="criarElemento()" /> </label>

[Isaac Sampaio 1]

Ajuda ai pessoal, preciso terminar esse trabalho e o bicho tá pegando...

[McrOnline 0]

Fala ae cara...

 

Esse esquema ai q você ta fazendo ta meio estranho...

tem um modo bem mais simples, vou tentar passar aqui

 

Cria uma <div> onde você quer que apareça os respectivos campos, vou dar o exemplo aqui ja com formulario:

 

<form name="form1">   <input type="radio" name="op1" id="op" onclick"pessoa(1);" selected> Pessoa Fisica<br>   <input type="radio" name="op2" id="op" onclick"pessoa(2);"> Pessoa Juridica<br><br>   <div id="campos">RG: <input type="text" name="rg"> </div></form>

entao a funcao pessoa(), que é chamada no evento onclick dos Radio Buttons

 

<script>function pessoa(tipo){  var getCampo = document.getElementById("campo");   if (pessoa == 1){	 getCampo.innerHTML = "RG: <input type="text" name="rg">";  }else{	 getCampo.innerHTML = "CNPJ: <input type="text" name="cnpj">";  }}</script>

é só adaptar o esquema pra como você quizer, ve se funfa ae.

 

abraço

[Isaac Sampaio 1]

Opa brother.Muito obrigado pela boa vontade em ajudar....Gostaria de saber se nao esta faltando alguma coisa em seu exemplo porque ele não funcionou aqui naum.Abraços..

Fala ae cara...Esse esquema ai q você ta fazendo ta meio estranho...tem um modo bem mais simples, vou tentar passar aquiCria uma <div> onde você quer que apareça os respectivos campos, vou dar o exemplo aqui ja com formulario:

<form name="form1">   <input type="radio" name="op1" id="op" onclick"pessoa(1);" selected> Pessoa Fisica<br>   <input type="radio" name="op2" id="op" onclick"pessoa(2);"> Pessoa Juridica<br><br>   <div id="campos">RG: <input type="text" name="rg"> </div></form>

entao a funcao pessoa(), que é chamada no evento onclick dos Radio Buttons

<script>function pessoa(tipo){  var getCampo = document.getElementById("campo");   if (pessoa == 1){	 getCampo.innerHTML = "RG: <input type="text" name="rg">";  }else{	 getCampo.innerHTML = "CNPJ: <input type="text" name="cnpj">";  }}</script>

é só adaptar o esquema pra como você quizer, ve se funfa ae.abraço

[Isaac Sampaio 1]

Este codigo que eu fiz fica bem proximo do meu objetivo, mas ele ainda tem alguns erros que ate então não consegui resolver:<!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>Teste</title><style type="text/css"> body{ font-family:arial; } #tabela1{ width:600px; } .celula1{ color:red; }</style><script language="javascript">function AddLinha(){ var table1 = document.getElementById("tabela1"); //Insere a Linha var linha = table1.insertRow(1); var campo = 'CPF: <input type=\"text" name="cpf" />  RG: <input type=\"text" name="rg" />'; var campo1 = 'CNPJ: <input type=\"text" name="cnpj" />';if (document.frm1.btn1.value == "F"){ //Inserção de celulas var coluna1 = linha.insertCell(-1); //Definindo o estilo para a célula coluna1.className = "celula1"; //Definindo o conteúdo para a célula coluna1.innerHTML = campo; }else{ //Inserção de celulas var coluna1 = linha.insertCell(-1); //Definindo o estilo para a célula coluna1.className = "celula1"; //Definindo o conteúdo para a célula coluna1.innerHTML = campo1; } }</script></head><body><table id="tabela1" width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <form name="frm1"> <tr> <td width="112">Pessoa Fisica: </td> <td width="488"><input type="radio" name="btn1" value="F" onclick="AddLinha()" />   Pessoa Juridica: <input type="radio" name="btn1" value="J" onclick="AddLinha()" /> </td> </tr> </form></table></body></html>Por favor me ajudem!!!!Abraços

[Tiago Cardoso 1]

Cara, tem mta coisa no seu cod, veja esse e só adapte a suas necessidades, funciona perfeitamente, veja:

<script language="javascript">function VerificaFJ(objForm, strField, evtKeyPress){	var valor = "";	var id = "";	var radio = "";	radio = document.getElementsByName("btn1");		for(var i=0;i<radio.length;i++) 	{		if(radio[i].checked) 		{			valor = radio[i].value;			id = radio[i].id;		}	}	if (valor == 'J')	{		alert("JURIDICA");		}	else	{		alert("FISICA");	}}</script>

troque os alerts pelo q desejar, e coloque nos radios isto:

onclick="return VerificaFJ(this.form, this.name, event);"

lembre-se nos dois radios, ok?

[Isaac Sampaio 1]

Olá amigo muito obrigado pela ajuda, fiz umm breve teste aqui nusando o alert mesmo e parece funcionar muito bem, atarde irei estarei em casa dai testarei de acordo com as minhas nescessidades. Mas desde ja sou imensamente grato a voce e toda a comunicade imasters, quando der certo posto o codigo.Abraços.

[Tiago Cardoso 1]

q isso rapaz, estamos ai p/ isso msm, ve se vai dar certo msm e faça isso, post o resultado!

[McrOnline 0]

Tava com alguns nomes errados e errinhos, agora ta ok. tenta ai

 

<script>function pessoa(tipo){  var getCampo = document.getElementById("campo");   if (tipo == "1"){	 getCampo.innerHTML = "RG: <input type='text' name='rg'>";  }else{	 getCampo.innerHTML = "CNPJ: <input type='text' name='cnpj'>";  }}</script><form name="form1">   <input type="radio" name="op" id="op1" onclick="pessoa('1');" checked="checked"> Pessoa Fisica<br>   <input type="radio" name="op" id="op2" onclick="pessoa('2');"> Pessoa Juridica<br><br>   <div id="campo">RG: <input type="text" name="rg"> </div></form>

abraço

[Isaac Sampaio 1]

Ola amigo, testei seu script e ficou realmente funcionando, mas tenho o seguinte problema, uma vez que o usuario escolheu uma das opçoes se ele resolver que não é FISICA e sim JURIDICA se ele clicar em Juridica os campos de formulario vao se empilhando, quando o correto seria que o campo anterior fosse removido..Se puder ajudar, logo mais vou brincar com o script se conseguir eu posto aqui.Valeu

[McrOnline 0]

Ola amigo, testei seu script e ficou realmente funcionando, mas tenho o seguinte problema, uma vez que o usuario escolheu uma das opçoes se ele resolver que não é FISICA e sim JURIDICA se ele clicar em Juridica os campos de formulario vao se empilhando, quando o correto seria que o campo anterior fosse removido..Se puder ajudar, logo mais vou brincar com o script se conseguir eu posto aqui.Valeu

o meu? esse nao é pra empilhar nada. Ele substitui os campos, conforme você clica nas opcoes.

[Isaac Sampaio 1]

Meu brother funcionou bem seu script, mas precisava que quando o usuario trocasse a opcao dos radios a linha que foi inserida na selecao anterior fosse apagada e inserida a nova opcao:

 

 

Vou postar o codigo dai voce veja ai o que esta acontecendo...

 

Se puder ajudar...claro..

 

<!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>Teste</title>

<style type="text/css">

body{

font-family:arial;

}

#tabela1{

width:600px;

}

.celula1{

color:red;

}

</style>

 

<script language="javascript">

 

function VerificaFJ(objForm, strField, evtKeyPress)

{

var valor = "";

var id = "";

var radio = "";

 

radio = document.getElementsByName("btn1");

 

for(var i=0;i<radio.length;i++)

{

if(radio.checked)

{

valor = radio.value;

id = radio.id;

}

}

if (valor == 'F')

{

 

var table1 = document.getElementById("tabela1");

var linha = table1.insertRow(1);

var campo = 'CPF:<input type=\"text" name="cpf" />RG:<input type=\"text" name="rg" />';

var coluna1 = linha.insertCell(-1);

coluna1.innerHTML = campo;

}else{

var table1 = document.getElementById("tabela1");

var linha = table1.insertRow(1);

var campo = 'CNPJ:<input type=\"text" name="cnpj" />';

var coluna1 = linha.insertCell(-1);

coluna1.innerHTML = campo;

 

}

}

</script>

</head>

 

<body>

<table id="tabela1" width="600" border="0" cellspacing="0" cellpadding="0" align="center">

<tbody>

<form name="frm1">

<tr>

<td width="112">Pessoa Fisica:</td>

<td width="20"><input type="radio" name="btn1" value="F" onclick="return VerificaFJ(this.form, this.name, event);" /></td>

<td width="123"> Pessoa Juridica:</td>

<td width="345"><input type="radio" name="btn1" value="J" onclick="return VerificaFJ(this.form, this.name, event);" /></td>

</tr>

</form>

</tbody>

</table>

 

</body>

</html>

 

 

q isso rapaz, estamos ai p/ isso msm, ve se vai dar certo msm e faça isso, post o resultado!

 

Ola amigo, testei seu script e ficou realmente funcionando, mas tenho o seguinte problema, uma vez que o usuario escolheu uma das opçoes se ele resolver que não é FISICA e sim JURIDICA se ele clicar em Juridica os campos de formulario vao se empilhando, quando o correto seria que o campo anterior fosse removido..Se puder ajudar, logo mais vou brincar com o script se conseguir eu posto aqui.

 

 

Valeu

o meu? esse nao é pra empilhar nada. Ele substitui os campos, conforme você clica nas opcoes.

 

Seu codigo e colei aqui e não funcionou, o codigo que esta empilhando é o do PKTIAGO...Obrigado pela força.

[McrOnline 0]

cara, o meu codigo ta funcionando, testei aqui no browser.

 

copia aqui abaixo e cola ele num html e testa.

 

<script>function pessoa(tipo){  var getCampo = document.getElementById("campo");   if (tipo == "1"){	 getCampo.innerHTML = "RG: <input type='text' name='rg'>";  }else{	 getCampo.innerHTML = "CNPJ: <input type='text' name='cnpj'>";  }}</script><form name="form1">   <input type="radio" name="op" id="op1" onclick="pessoa('1');" checked="checked"> Pessoa Fisica<br>   <input type="radio" name="op" id="op2" onclick="pessoa('2');"> Pessoa Juridica<br><br>   <div id="campo">RG: <input type="text" name="rg"> </div></form>

[Isaac Sampaio 1]

Olá Brother,Desculpe pela resposta anterior, mas realmente ja havia copiado e não funcionou, mas agora, so tenho a elogiar, funciona exatamente da forma que eu preciso....E ate facil de adicionar novas funcionalidades....Fico intereiramente Grato Abraços...Valeu pelo força.Standart

cara, o meu codigo ta funcionando, testei aqui no browser.copia aqui abaixo e cola ele num html e testa.

<script>function pessoa(tipo){  var getCampo = document.getElementById("campo");   if (tipo == "1"){	 getCampo.innerHTML = "RG: <input type='text' name='rg'>";  }else{	 getCampo.innerHTML = "CNPJ: <input type='text' name='cnpj'>";  }}</script><form name="form1">   <input type="radio" name="op" id="op1" onclick="pessoa('1');" checked="checked"> Pessoa Fisica<br>   <input type="radio" name="op" id="op2" onclick="pessoa('2');"> Pessoa Juridica<br><br>   <div id="campo">RG: <input type="text" name="rg"> </div></form>