Ir para conteúdo

POWERED BY:

Arquivado

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

phpricardo

[Resolvido] botão radio mostrar/não div corretamente

Por , em Javascript

Recommended Posts

phpricardo    0

phpricardo
Postado

Olá galera, preciso de uma ajuda quanto a esse formulário.

http://sebraeprev.com.br/Formularios/F4/

 

Se puderem ver o código fonte.

 

Eu preciso fazer com que ao clicar no botão radio apareça div (que já está acontecendo), mas porem ao clicar em outro radio o anterior clicado suma! Entende? Não estou entendo como fazer isso exatamente.

 

function mostrar2() {
		if (document.getElementById("div1").style.display == "none") 
		 {
  		    document.getElementById("div1").style.display = "block";
		 }
		 else
		 {
		 	document.getElementById("div1").style.display = "none";
		 }
	}

 

Outra dúvida é como eu vou validar os campos do radio PORTABILIDADE por exemplo: Clicando nele ai vai aparecer os input, mas so quando clicar no radio de PORTABILIDADE que começa a validar os campos.

 

Bem acho que é só isso.

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Danilo Almeida    0

Danilo Almeida
Postado

Primeiro, você está usando onclick = "mostrar();" ?

então o que está acontecendo ao clicar no elemento está abrindo mesmo que a caixa ja esteja checada estamos vamos alterar isso então será assim ele tem que checar se a caixa ja está "checked" 

function mostrar2() {
                if (document.getElementById("div1").checked == true) 
                 {
                    document.getElementById("div1").style.display = "block";
                 }
        }
retirei o else para quando clicar de novo não sumir pois o que vai fazer sumir será na hora que clicar em outro radio button

então assim estou atrasado agora risos

mas o jeito simples e fácil seria assim agora você faz o mesmo no outro radio button então você vai adicionar algo a mais nisso que se a div1 estiver com display:block você transforma ela para display:none

 

entedeu?

abraços ;D

espero ter ajudado pelo menos um pouco

Compartilhar este post

Link para o post
Compartilhar em outros sites

phpricardo    0

phpricardo
Postado 

function mostrar2() {
         if(document.getElementById("div1").checked = true){
          	document.getElementById("div1").style.display = "";
      	  }
		  else
		 {
		 	document.getElementById("div3").style.display = "none";
		 }

cara ta assim agora, mas ta apenas mostrando a div e se mudo de radio não some. =\

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tenta assim:

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function hide_all( el, tagName ){
	var tags = el.getElementsByTagName( tagName );
	for( var i=0; i<tags.length; i++ )
	{
		tags[i].style.display = 'none';
	}
}
window.onload = function()
{
	hide_all( id('form'), 'div' );
	var inputs = document.getElementsByTagName('input');
	for( i in inputs )
	{
		inputs[i].onclick = function()
		{
			hide_all( id('form'), 'div' );
			id( this.value ).style.display = id( this.value ).style.display=='block' ? 'none' : 'block';
		}
	}
}
</script>
</head>
<body>
       
	<fieldset id="form">
		<label><input type="radio" name="opcoes" value="opcao-1" />Opção 1</label>
		<div id="opcao-1">Conteudo da opção 1</div>
		
		<br />
		<label><input type="radio" name="opcoes" value="opcao-2" />Opção 2</label>
		<div id="opcao-2">Conteudo da opção 2</div>
		
		<br />
		<label><input type="radio" name="opcoes" value="opcao-3" />Opção 3</label>
		<div id="opcao-3">Conteudo da opção 3</div>
	</fieldset>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

phpricardo    0

phpricardo
Postado

Ainda Fail isso.. mas mesmo assim é código de mais pra pouca coisa eu acho?! =\ Ainda estou pesquisando soluções aqui...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum.. ??

como assim ?

 

tipo.. aparece os 3 radios.. clicando num deles, aparece o conteudo abaixo

se clicar no outro radio, esconde o conteudo do outro, e aparece o conteudo referente ao radio que você clicar.

 

pq 'fail'?

se você não se explicar, fica impossível te ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

phpricardo    0

phpricardo
Postado

Cara.. falando a verdade não conseguir implementar esse fonte ai.. =\ mas acho que ta muito complicado.

function mostrar2() {
         if(document.getElementById("opc1").checked == true){
          	document.getElementById("div1").style.display = "";
      	  }
			else 
			{ 
				 document.getElementById("div1").style.display = "none";
			 }
		 }

HTML

 

<input name="opc" type="radio" onClick="mostrar2()" id="opc1" value="opc1" /> </span><strong>AUTOPATROCINADO</strong> - A manutenção de   minha inscrição na condição de Participante Autopatrocinado, assumindo   as contribuições pessoais e patronais (risco e básica patronal) para o   plano, acrescidas da taxa de carregamento. Sendo assim, opto por:</p>
        
        
        <div id="div1" style="display:none;">
        	</p> 
        	<span class="style20">         
<input type="checkbox" name="opc1_1" id="opc1_1" />
           </span><span class="opcao">Manter o percentual de contribuição.</span><br />
          <span class="style20">         
          <input type="checkbox" name="opc1_2" id="opc1_2" />
          </span><span class="opcao">Alteração do percentual de contribuição pessoal conforme informado abaixo: </span>
        <table width="619" height="60" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="254" valign="middle"><span class="opcao">  <span class="style20">
              <input type="checkbox" name="opc1_2_1" id="opc1_2_1" />
            </span>Contribuição Básica</span></td>
            <td width="365" valign="middle"><span class="opcao">Percentual (%):    <select name="porcentual1" id="porcentual1">
      <option value="0" selected="selected">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
    </select></span></td>
          </tr>
          <tr>
            <td width="254" valign="middle"><span class="opcao">  <span class="style20">
              <input type="checkbox" name="opc1_2_2" id="opc1_2_2" />
            </span>Contribuição de Serviço Passado </span></td>
            <td width="365" valign="middle"><span class="opcao">Percentual (%):
              <select name="porcentual2" id="porcentual2">
 <option value="0" selected="selected">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
              </select>
            </span></td>
          </tr>
          <tr>
            <td width="254" valign="middle"><span class="opcao">  <span class="style20">
              <input type="checkbox" name="opc1_2_3" id="opc1_2_3" />
            </span>Contribuição Voluntária Mensal</span></td>
            <td width="365" valign="middle"><span class="opcao">Percentual (%):
              <input type="text" name="porcentual3" id="porcentual3" size="5">
            </span></td>
          </tr>
    </table>
        <p class="opcao"><span class="style20">                </span> Forma de recolhimento:<br />
          <span class="style20">                </span><span class="style20">     
          <input type="checkbox" name="form_re1" id="form_re1" />
          </span>Autorizo a  emissão de boleto bancário em meu nome, com remessa para o endereço residencial <span class="style20">          </span><span class="style20">      </span><span class="style20">          </span><span class="style20">   </span>especificado nos itens 7 a 11. <br />
          <span class="style20">                </span><span class="style20">     
          <input type="checkbox" name="form_re2" id="form_re2" />
          </span>Autorizo o desconto direto na minha conta corrente abaixo designada (apenas para Banco do Brasil).</p>
        <table width="308" border="0" align="center">
          <tr>
            <td width="154"><span class="opcao">Banco:</span></td>
            <td width="144"><span class="opcao">
              <input type="text" name="n_banco_b" value="Banco do Brasil" disabled="disabled"/>
            </span></td>
          </tr>
          <tr>
            <td><span class="opcao">Agência Nº:<span class="style20">   </span></span></td>
            <td><span class="opcao">
              <input type="text" name="ag_banco" id="ag_banco" />
            </span></td>
          </tr>
          <tr>
            <td><span class="opcao">Conta Corrente nº:<span class="style20">  </span></span></td>
            <td><span class="opcao">
              <input type="text" name="cc_banco" id="cc_banco" />
            </span></td>
          </tr>
        </table>
        </div>
      
      
        <p class="opcao" align="justify"><span class="style20">      
            <input type="radio" value="opc2" name="opc" />
           </span><strong>BENEFÍCIO PROPORCIONAL DIFERIDO (BPD)</strong> - A manutenção de minha inscrição, na condição de Participante Vinculado, com a suspensão do pagamento das contribuições para recebimento de Benefício Proporcional Diferido, quando forem cumpridas as condições de elegibilidade ao benefício de Aposentadoria Normal.</p>
        <p class="opcao" align="justify"><span class="style20">      
            <input type="radio" name="opc" value="opc3" onClick="mostrar()" />
</span><strong>RESGATE</strong> - O cancelamento de minha inscrição e o Resgate da reserva de poupança, na forma de recebimento abaixo:</p>
        
        <div id="div2" style="display:none;">
        	          
          <input type="radio" value="resg_1" name="resg" id="resg" />
        </span><span class="style20"><strong>Parcela única</strong>          
<input type="radio" value="resg_2" name="resg" id="resg" />
          <strong>Parcela mensais em número de</strong></span><strong>
        <input name="p_men" type="text" id="p_men" size="6" />
        <span class="style20">parcelas</span></strong> <span class="obrigatorio">(até 60 parcelas máximo) </span></p>
        <p class="opcao" align="justify"><span class="style20">                             
          <input type="radio" name="n_cc" value="cc" id="n_cc" />
        </span>Não possuo conta corrente. Ciente que o valor será disponibilizado por ordem de pagamento para ser retirado em qualquer agência do Banco do Brasil, mediante apresentação do CPF. <br />
        <span class="style20">                             
        <input type="radio" name="n_cc" value="cc2" id="n_cc" />
        </span>Crédito em conta corrente, abaixo informada, da qual sou titular.</p>
        <table width="542" border="0" align="center">
          <tr>
            <td width="175" class="opcao">Banco: (Nome e Nº)</td>
            <td width="357" class="opcao">
              <input name="n_banco_b2" type="text" size="50" />
            </td>
          </tr>
          <tr>
            <td class="opcao">Agência Número:</td>
            <td class="opcao">
              <input type="text" name="ag_banco2" id="ag_banco2" />
            </td>
          </tr>
          <tr>
            <td class="opcao">Conta Corrente nº:</td>
            <td class="opcao">
              <input type="text" name="cc_banco2" id="cc_banco2" />
            </td>
          </tr>
          <tr>
            <td class="opcao">Tipo de conta:<span class="style20">  </span></td>
            <td class="opcao"><span class="style20">
            <input type="radio" name="tipoC" value="pp" id="pp" />
            </span> Poupança <span class="style20">
            <input type="radio" name="tipoC" value="cc" id="cc" />
            </span> Conta corrente</td>
          </tr>
        </table>
        </div>

 

 

 

Ai depois o que quero também e que quando tiver "ativo" essa radio comece a validar tb os campos interno dele.

 

=\

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

complicado é esse teu html cheio de <table> ^_^

 

resumindo, pra você ver o funcionamento.. tente entender o código js que eu fiz.. não tem 'nada de mais', é só oq você precisa para fazer oque você quer.

 

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function hide_all( el, tagName ){
	var tags = el.getElementsByTagName( tagName );
	for( var i=0; i<tags.length; i++ )
	{
		tags[i].style.display = 'none';
	}
}
window.onload = function()
{
	hide_all( id('form'), 'div' );
	var inputs = document.getElementsByTagName('input');
	for( i in inputs )
	{
		inputs[i].onclick = function()
		{
			hide_all( id('form'), 'div' );
			id( this.value ).style.display = id( this.value ).style.display=='block' ? 'none' : 'block';
		}
	}
}
</script>
</head>
<body>
			
	<fieldset id="form">
		<p><input name="opc" type="radio" value="opc1" />
		<strong>AUTOPATROCINADO</strong> - A manutenção de   minha inscrição na condição de Participante Autopatrocinado, assumindo  
		as contribuições pessoais e patronais (risco e básica patronal) para o   plano, acrescidas da taxa de carregamento. Sendo assim,
		opto por:</p>
		<div id="opc1" style="display:none;">
			Conteudo Autopatrocinado
		</div><!-- /opc1 -->


		
		<p><input type="radio" value="opc2" name="opc" />
		<strong>BENEFÍCIO PROPORCIONAL DIFERIDO (BPD)</strong> - A manutenção de minha inscrição, na condição de Participante Vinculado, 
		com a suspensão do pagamento das contribuições para recebimento de Benefício Proporcional Diferido, quando forem cumpridas as 
		condições de elegibilidade ao benefício de Aposentadoria Normal.</p>
		
		
	
		<p><input type="radio" name="opc" value="opc3" />
		<strong>RESGATE</strong> - O cancelamento de minha inscrição e o Resgate da reserva de poupança, na forma de recebimento abaixo:</p>
		<div id="opc3" style="display:none;">
			Conteudo Resgate
		</div><!-- /opc3 -->
	</fieldset>
		
</body>
</html>
nem alterei nada do js, apenas adaptei o teu html.

veja a mudança de IDs.

Compartilhar este post

Link para o post
Compartilhar em outros sites

phpricardo    0

phpricardo
Postado

Hahahaha... malz pelo html cara, e que me botarão pra fazer na correria essas coisas, ai...

 

Mas agora deu certo mano! :D Muito obrigado!

 

Agora a partir desse momento como faço pra fazer a validação?

 

id esta visivel então começa validação...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum...

a resposta está na tua pergunta:

if( id('opc1').style.display=='block' )
{
   //faz validação dos campos dentro de #opc1
}
if( id('opc3').style.display=='block' )
{
   //faz validação dos campos dentro de #opc3
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

phpricardo    0

phpricardo
Postado

Cara agora que fui ver...

 

http://sebraeprev.com.br/Formularios/F4/

 

testa ai...

tu vai ver que quando clico no radio mostra a div oculta, mas se clico pra preencher os dados ele oculta de novo. AJUDA! =\

 

putz amigo..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é só limitar o campo de ação:

window.onload = function()
{
	hide_all( id('form'), 'div' );
	var inputs = document.getElementsByTagName('input');
	for( i in inputs )
	{
		if( inputs[i].value=='opc1' || inputs[i].value=='opc2' || inputs[i].value=='opc3' || inputs[i].value=='opc4' )
		{
			inputs[i].onclick = function()
			{
				hide_all( id('form'), 'div' );
				id( this.value ).style.display = id( this.value ).style.display=='block' ? 'none' : 'block';
			}
		}
	}
}
veja que estávamos aplicando o evento onclick em todos os inputs do documento.

Agora o IF ali, vai limitar a apenas os inputs que tiverem um desses values..

 

tipo.. a idéia aqui é mostrar o caminho.. tá bem simples.. tenta estudar e entender.

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