Mudar conteúdo de acordo com RadioButton

[CleitonGarcia 31]

Olá colegas,

 

Tenho 3 rádios buttons:

 

( ) Empresa Atual ( ) Outra Empresa ( ) Não trabalho

 

Ao selecionar Empresa Atual, deve aparecer para o usuário informar o número de telefone, e outras informações. Se ele selecionar Outra Empresa, aparece os campos qual empresa trabalha e o número de telefone, se ele selecionar Não trabalho, nada é exibido.

 

Alguém pode me ajudar?

 

Obrigado desde já!

[jgustavo99 85]

Olá! Já estive com um problema parecido com o seu, também com usando os radiobuttom. Para você fazer isso sem dar reflesh(deixar a página mais dinâmica), precisará usar Requisições com Ajax. Da uma pesquisa no Google sobre isso.Abaixo vou listar alguns links, que pode lhe ajudar:

 

http://tutsmais.com.br/blog/ajax/ajax-com-jquery-enviando-dados-via-ajax/

http://jquerybrasil.org/ajax-com-jquery-metodo-ajax/

 

Espero ter ajudado

[CleitonGarcia 31]

Tem certeza que deve ser feito através do Ajax? Apenas o jQuery, por exemplo, não resolveria?

 

@Edit:

 

É apenas para mudar o conteúdo HTML, sem necessidade de linguagem server-side, tipo com aquela função do JS chamada 'onChange', não róla?

[jgustavo99 85]

Verdade, estava me confundindo é que o meu problema eu precisava usar o PHP para fazer uma busca no DB. Sim da para usar JavaScript. Sim da para usar onChange e ai você cria uma função no JS que verefica se você clicou e em qual você clicou.

[CleitonGarcia 31]

Eis minha horrível solução:

<script type="text/javascript">
	function verificarAlesc()
	{
		var trabalho = document.forms['haha']['q'].value;

		if(trabalho.toLowerCase() == 'alesc')
		{
			document.getElementById("camposAlesc").style.display = "block";
			document.getElementById("camposOutro").style.display = "none";
		}
		else if (trabalho.toLowerCase() == 'outro')
		{
			document.getElementById("camposOutro").style.display = "block";
			document.getElementById("camposAlesc").style.display = "none";
		}
		else if (!trabalho.toLowerCase())
		{
			document.getElementById("camposAlesc").style.display = "none";
			document.getElementById("camposOutro").style.display = "none";
		}
	}
</script>

<style>
	.escondido
	{
		display:none;
	}
</style>

<form name="testeForm">
<input type="radio" name="q" onchange="verificarEmpresa()" value="alesc">ALESCÚ<br>
<input type="radio" name="q" onchange="verificarEmpresa()" value="outro">Outro<br>
<input type="radio" name="q" onchange="verificarEmpresa()" value="">Não trabalho
</form>

<div id="camposMinhaEmpresa" class="escondido">
Trabalhas na minha empresa
</div>

<div id="camposOutro" class="escondido">
Você trabalha em outra empresa
</div>

Alguém sabe como melhorar?

[jgustavo99 85]

Você pode também dessa maneira, assim você não precisar criar 2 divs:

<script type="text/javascript">
    function verificarAlesc()
    {
        var trabalho = document.forms['haha']['q'].value;

        if(trabalho.toLowerCase() == 'alesc')
        {
           $("#resultado").html("<p>Trabalhas na minha empresa</p>");
        }
        else if (trabalho.toLowerCase() == 'outro')
        {
              $("#resultado").html("<p>Trabalhas em outra empresa</p>");
        }
    }
</script>

<form name="testeForm">
<input type="radio" name="q" onchange="verificarEmpresa()" value="alesc">ALESCÚ<br>
<input type="radio" name="q" onchange="verificarEmpresa()" value="outro">Outro<br>
<input type="radio" name="q" onchange="verificarEmpresa()" value="">Não trabalho
</form>

<div id="resultado"></div>

</div>

[CleitonGarcia 31]

Valeu guri. Essa melhoria que eu precisava pro meu código JavaScript!