Ajax e radio no form

Toma!

HTML:

<div>
 <fieldset>
 <legend>Escolha o tipo</legend>
 <label>
 <input type="radio" value="fisica" data-target="tipo_documento" name="tipo_documento" checked />
 Pessoa Física
 </label>

 <label>
 <input type="radio" value="juridica" data-target="tipo_documento" name="tipo_documento" />
 Pessoa Jurídica
 </label>
 </fieldset>

 <label>
 <span data-target="label_documento">Digite o CPF:</span>
 <input type="text" />
 </label>
</div>

	**Javascript:**

var radioInputs = document.querySelectorAll('[data-target=tipo_documento]');

radioInputs.forEach(function (input) {
 input.addEventListener('change', function (event) {
 var pergunta = event.target.value === 'fisica'
 ? 'Digite o CPF:'
 : 'Digite o CNPJ:';

 document.querySelector('[data-target=label_documento]')
 .innerText = pergunta;
 });
});

	**Resultado:** [https://jsbin.com/soqajorefu/3/edit?html,js,output](https://jsbin.com/soqajorefu/3/edit?html,js,output)

	 

	O código está utilizando o atributo **data-*** para dizer quem é quem... os radios precisam ter o mesmo *name* pra funcionar. Acredito que você terá problemas com a função de máscara, mas aí já é outro problema....

	 

	Qualquer dúvida, grita! :-)

>

12 minutos atrás, Michael Granados disse:

Toma!

HTML:

<div>
 <fieldset>
 <legend>Escolha o tipo</legend>
 <label>
 <input type="radio" value="fisica" data-target="tipo_documento" name="tipo_documento" checked />
 Pessoa Física
 </label>

 <label>
 <input type="radio" value="juridica" data-target="tipo_documento" name="tipo_documento" />
 Pessoa Jurídica
 </label>
 </fieldset>

 <label>
 <span data-target="label_documento">Digite o CPF:</span>
 <input type="text" />
 </label>
</div>

 **Javascript:**

var radioInputs = document.querySelectorAll('[data-target=tipo_documento]');

radioInputs.forEach(function (input) {
 input.addEventListener('change', function (event) {
 var pergunta = event.target.value === 'fisica'
 ? 'Digite o CPF:'
 : 'Digite o CNPJ:';

 document.querySelector('[data-target=label_documento]')
 .innerText = pergunta;
 });
});

 **Resultado:** [https://jsbin.com/soqajorefu/3/edit?html,js,output](https://jsbin.com/soqajorefu/3/edit?html,js,output)

  

 O código está utilizando o atributo **data-*** para dizer quem é quem... os radios precisam ter o mesmo *name* pra funcionar. Acredito que você terá problemas com a função de máscara, mas aí já é outro problema....

  

 Qualquer dúvida, grita! :-)

	 

	Michael Granados muito obrigado, é isso aí!

	Perfeito!

Uma outra dúvida, no text vou colocar uma máscara para CPF e uma para o CNPJ  em javascript , alternando estas mascaras no text de acordo com a opção selecionada.

	<script>

	function MascaraCPF(cpf)

	{ 

	var strCPF = []; 

	strCPF = strCPF + cpf; 

	if (strCPF.length == 3){ 

	strCPF = strCPF + '.'; 

	document.form1.cpf.value = strCPF;

	}

	if (strCPF.length == 7){ 

	strCPF = strCPF + '.'; 

	document.form1.cpf.value = strCPF; 

	}

	if (strCPF.length == 11){ 

	strCPF = strCPF + '-'; 

	document.form1.cpf.value = strCPF; 

	}

	}

	</script>

E a dúvida seria...? Não, brincadeira... Bom, neste caso você tem três opções:

- manipular a forma como o input vai manipular as máscaras encapsulando-as em um método só variando conforme o tipo de campo, recomendo limpar o campo no momento em que o usuário trocar de CNPJ para CPF e vice-versa

- trocar o campo de input inteiro, atribuindo  devida máscara no momento da troca de tipo de campos

- deixar os dois campos na página com names distintos para fazer o tratamento do lado do servidor e apenas trocar o display/classe deles quando trocar o radio

Use your illusion.

Você tem razão não ficou claro a dúvida, mas é relativo a sua primeira citação.

Quando selecionar a opção, vai alterar a label e a mascara do input, o problema  (dúvida) é aí como trocar a mascara.

Como eu disse estou iniciando em javascript e mexendo no seu código não consegui a proeza. kkk...

Adicionei lá as máscaras e a alteração, utilizei o removeEventListener e o addEventListener... também precisei colocar o mesmo ao iniciar a página...

https://jsbin.com/yobubidifa/1/edit?html,js,output

Michael Granados deu certo, muito obrigado!