radio button onclick

[Developer17]

Boa tarde.

Estou aqui com um pequeno problema porque na minha página tenho o seguinte:

<div class="leftColumn">
<input type="radio" name="selecao" value="pesquisar">Pesquisar<br>
<input type="radio" name="selecao" value="inserir">Inserir
</div>

O que pretendo é que a página apareça apenas com isto, depois se o utilizador escolher a primeira opção que apareça também isto:

<div class="rightColumn">
 <form action="formcliente.php" method="post">
	 <legend>Cliente</legend>	
	 <div class="row-fluid">
	 <div class="span2 lightblue">
		 <label>Número Cliente</label>
		 <input type="text" name="ncliente" id="ncliente" class="span12">		
	 </div><!--/span-->
	 <div class="span5 lightblue">
		 <label>Nome</label>
		 <input type="text" name="nome" id="nome" class="span12">
	 </div><!--/span-->
	 </div><!--/row-->
	 <div class="row-fluid">
	 <div class="span2 bgcolor">
		 <label>Telefone</label>
		 <input type="text" name="telefone" id="telefone" class="span12">
	 </div><!--/span-->
	 <div class="span2 bgcolor">
		 <label>Telemóvel</label>
		 <input type="text" name="telemovel" id="telemovel" class="span12">
	 </div><!--/span-->
	 </div><!--/row-->
	 <div class="row-fluid">
	 <div class="span6 bgcolor">
		 <label>E-mail</label>
		 <input type="text" name="email" id="email" class="span12">
	 </div><!--/span-->
	 </div><!--/row-->
	 <div class="row-fluid">
	 <div class="span6 bgcolor">
		 <label>Empresa</label>
		 <input type="text" name="empresa" id="empresa" class="span12">
	 </div><!--/span-->
	 </div><!--/row-->
	 <div class="row-fluid">
	 <div class="span12 bgcolor">
		 <label>Morada</label>
		 <input type="text" name="rua" id="rua" class="span12 input-mini" placeholder="Rua">
	 </div>
	 </div>
	 <div class="row-fluid">
	 <div class="span6 bgcolor">
		 <input type="text" name="cidade" id="cidade" class="span12 input-mini" placeholder="Cidade">
	 </div><!--/span-->
	 <div class="span6 bgcolor">
		 <input type="text" name="cp" id="cp" class="span12 input-mini" placeholder="Código Postal">
	 </div><!--/span-->
	 </div><!--/row-->		
	 <div class="row-fluid">
	 <div class="span6 bgcolor">
		 <input type="text" name="distrito" id="distrito" class="span12 input-mini" placeholder="Distrito">
	 </div><!--/span-->
	 </div><!--/row-->
	 <div class="row-fluid">
	 <div class="span6 bgcolor">
		 <input type="submit" value="Submit">
	 </div><!--/span-->
	 </div><!--/row-->					

 <div class="span4">
 </div><!--/span-->	


 </form>
</div>

E se escolher a segunda opção que apareça isto:

<div class="rightColumn">
<form action="">
	 <div class="row-fluid">
	 <div class="span2 lightblue">
		 <label>Número Cliente</label>
		 <input type="text" name="ncliente" id="ncliente" class="span12">		
	 </div><!--/span-->
	 <div class="span5 lightblue">
		 <label>Nome</label>
		 <input type="text" name="nome" id="nome" class="span12">
	 </div><!--/span-->
	 </div><!--/row-->
<input type="submit">
</form>
</div>

Pelo que estive a pesquisar, para isto preciso de um evento onclick em js, mas não encontrei nenhum projecto de jeito em que me possa basear e não percebo nada de js.

Alguém pode dar uma ajuda?

Edited April 24, 2015 at 04:15 PM by apocsantos
geshi

[help]

Aplica ids e display none nas duas divs

<div class="rightColumn" id="rightColumn" style="display:none;">
a outra
<div class="leftColumn" id="leftColumn" style="display:none;">

Usa essa função js

<script>
function acao(acao) {
if(acao=="pesquisar") {
document.getElementById('rightColumn').style.display='block';
document.getElementById('leftColumn').style.display='none';
}
if(acao=="inserir") {
document.getElementById('rightColumn').style.display='none';
document.getElementById('leftColumn').style.display='block';
}
}
</script>

E esses input radio

<input type="radio" name="selecao" value="pesquisar" onclick="acao('pesquisar')">Pesquisar<br>
<input type="radio" name="selecao" value="inserir" onclick="acao('inserir')">Inserir

Edited May 5, 2015 at 04:14 PM by apocsantos
geshi