Ir para conteúdo

POWERED BY:

Arquivado

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

Tonga

[Resolvido] Ocultar / Exibir Formulário

Por , em Javascript

Recommended Posts

Tonga    1

Tonga
Postado

Bom dia a todos.

Primeiro eu gostaria de dizer que sou iniciante nesta parte de web e ainda estou dando os meus primeiros passos em JavaScript e CSS.

Eu pesquisei aqui no forum sobre o assunto mas não achei nenhum post que me ajudase a descobrir o porque o meu exemplo não funciona.

 

Eu desenvolvi um código a onde tenho dois formulários, que inicialmente ficam ocultos, e dois links a onde a idéia é a seguinte:

Ao clicar no link 1, o formulário 1 aparece e faz o formulário 2 se ocultar.

Ao clicar no link 2, o formulário 2 aparece e faz o formulário 1 se ocultar.

 

O código até "funciona" mas, após executar o script que oculta um dos formulários e exibe o outro, ele volta ao estado inicial a onde ambos os formulários ficam ocultos.

 

Será que alguém pode me ajudar a identificar o meu erro ?

 

Obrigado.

 

<!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=utf-8" />
<title>Untitled Document</title>
   </head>

   <body>
       <div id="idMenuEsquerdo" style="float:left">
           <a href="" id="idLink1" onclick="ufExibirOcultar(this);">Link 1</a> <br/>
           <a href="" id="idLink2" onclick="ufExibirOcultar(this);">Link 2</a> <br/>
       </div>

       <div id="idCorpo" style="float:left">
           <div id="idCampo1" style="display:none">Campo1</div>
           <div id="idCampo2" style="display:none">Campo2</div>
       </div>

       <script>
    function ufExibirOcultar(objElemento)
    {
        if(objElemento.id == "idLink1")
        {
            document.getElementById("idCampo1").style.display = "block";
                   document.getElementById("idCampo2").style.display = "none";
               }
               else
               {
                   document.getElementById("idCampo1").style.display = "none";
                   document.getElementById("idCampo2").style.display = "block";
               }
           }
</script>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
O código até "funciona" mas, após executar o script que oculta um dos formulários e exibe o outro, ele volta ao estado inicial a onde ambos os formulários ficam ocultos.

Como está o CSS?

Se você utilizar 'display: none' nos dois eles vão sumir mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tonga    1

Tonga
Postado

Como está o CSS?

Se você utilizar 'display: none' nos dois eles vão sumir mesmo...

 

Na verdade o CSS são estes styles que estam no exemplo.

 

O fato de eu usar a função javascript para mudar o style não deveria fazer com que eles ficassem visíveis permanentemente?

 

O problema é que eles ficam visiveis por uma fração de segundo e logo depois voltam a ficar ocultos.

Ou seja, o javascript faz eles ficarem visiveis, mas alguma outra coisa (que não faz parte do meu código) faz eles voltarem a ficar invisíveis.

 

O contrário também é verdadeiro, se eu mudar o style para display:block, ambos começam visíveis e ao clicar em um dos links um deles fica oculto por uma fração de segundos e depois volta a ficar visível.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kakashi_Hatake    267

Kakashi_Hatake
Postado

Isso acontece porque logo após mostrar a div oculta, ele redireciona para o link clicado.

 

Uma solução, caso você realmente não queira ser redirecionado, é usar o return.

 

       <div id="idMenuEsquerdo" style="float:left">
           <a href="" id="idLink1" onclick="return ufExibirOcultar(this);">Link 1</a> <br/>
           <a href="" id="idLink2" onclick="return ufExibirOcultar(this);">Link 2</a> <br/>
       </div>

       <div id="idCorpo" style="float:left">
           <div id="idCampo1" style="display:none">Campo1</div>
           <div id="idCampo2" style="display:none">Campo2</div>
       </div>        
       <script>
           function ufExibirOcultar(objElemento)
           {
               if(objElemento.id == "idLink1")
               {
                   document.getElementById("idCampo1").style.display = "block";
                   document.getElementById("idCampo2").style.display = "none";					
               }
               else
               {
                   document.getElementById("idCampo1").style.display = "none";
                   document.getElementById("idCampo2").style.display = "block";
               }
	return false;
           }
       </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tonga    1

Tonga
Postado

Isso acontece porque logo após mostrar a div oculta, ele redireciona para o link clicado.

 

Uma solução, caso você realmente não queira ser redirecionado, é usar o return.

 

Perfeito !

Funcionou exatamente como deveria ! Muito Obrigado Carlos.

 

Tenho mais uma dúvida:

Utilizar links em branco, como eu utilizei no exemplo, é uma forma correta de se fazer o usuário interagir com a página para ocultar/exibir informações na mesma ? Ou seria apenas uma gambiarra que deve-se evitar ?

 

 

OBS:

Só para constar, as alterações no meu código de exemplo foram as seguintes:

* Linhas 10 e 11 -> Fazer o evento onclick retornar a resposta da função.

* Linha 32 -> Fazer a função ufExibirOcultar retornar false.

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