Desmarcar opções de formulário - CSS e JavaScript

[Carlos Colon 0]

Fala pessoal,

 

Sou novo aqui e em programação também.

 

Estou desenvolvendo um formulário com dezenas de campos, e vários deles só devem aparecer quando uma opção select for selecionada.

 

Isso eu já consegui fazer usando uma div com display none e um pequeno código javascript com algumas If, o problema está no "else".

 

no link: http://www.abrale.org.br/sites/formulario/formulario.php, existe um campo "categoria" que cada opção selecionada abre uma parte nova do formulário.

 

O problema é que se eu ficar mudando as opções os quadros somam em vez de esconder um e aparecer o outro.

 

Enfim, a dúvida é: Como faço um else para que style display, volte a ficar none quando as opções não estiverem selecionadas.

 

Segue código JavaScript:

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("categoria").value;
        if(option == "Cuidador"){
            document.getElementById("cuidador_esconder").style.display ="inline";
        }
		if(option == "Paciente"){
            document.getElementById("paciente_esconder").style.display ="inline";
        }
		if(option == "Medico"){
            document.getElementById("medico_esconder").style.display ="inline";
        }
		if(option == "Profissional da Saúde"){
            document.getElementById("profissional_esconder").style.display ="inline";
        }
		
</script>

[Rafael Sirotheau 43]

Na verdade, não precisa de um else, basta esconder todas antes de exibir a desejada:

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("categoria").value;
        
        // Esconde todas antes de exibir somente selecionada
        document.getElementById("cuidador_esconder").style.display ="none";
        document.getElementById("paciente_esconder").style.display ="none";
        document.getElementById("medico_esconder").style.display ="none";
        document.getElementById("profissional_esconder").style.display ="none";

        // Exibe somente selecionada
        if(option == "Cuidador"){
            document.getElementById("cuidador_esconder").style.display ="block";
        }
	if(option == "Paciente"){
            document.getElementById("paciente_esconder").style.display ="block";
        }
	if(option == "Medico"){
            document.getElementById("medico_esconder").style.display ="block";
        }
	if(option == "Profissional da Saúde"){
            document.getElementById("profissional_esconder").style.display ="block";
        }
		
</script>

Obs. Evite utilizar 'inline' para div, ainda mais nesse seu caso. Alguns navegadores podem não exibir como você espera. Para div, o padrão seria 'block'

[Carlos Colon 0]

Show, funcionou perfeitamente. Tinha que informar primeiro o "valor" delas... como sou burro kkkk

 

Se vocês puderem me ajudar, nesse mesmo formulário, quando selecione a categoria que acabamos de corrigir, a div aparece, mas o usuário pode não perceber, queria colocar uma âncora junto com esse script, para quando a opção for selecionada, a página rolar até a ancora que coloquei...

 

Como posso fazer?

[Rafael Sirotheau 43]

O CSS as define como display: none, mas, o seu javascript altera o display inline. Sendo assim, para esconde-las novamente, é precisar retirar o display: inline que foi setado pelo javascript diretamente no html.

Quanto a ancora, primeiramente, defina a classe dessas divs como 'grid_12', ou então elas ficam fora.

<div id="paciente_esconder" class="grid_12">
<div id="cuidador_esconder" class="grid_12">
<div id="profissional_esconder" class="grid_12">
<div id="medico_esconder" class="grid_12">

Agora, no seu javascript, defina o hash do location (que é a ancora).

<script type="text/javascript">
    function optionCheck(){
        var option = document.getElementById("categoria").value;
        
        // Esconde todas antes de exibir somente selecionada
        document.getElementById("cuidador_esconder").style.display ="none";
        document.getElementById("paciente_esconder").style.display ="none";
        document.getElementById("medico_esconder").style.display ="none";
        document.getElementById("profissional_esconder").style.display ="none";
        
        window.location.hash = '';

        // Exibe somente selecionada
        if(option == "Cuidador"){
            document.getElementById("cuidador_esconder").style.display ="block";
            window.location.hash="cuidador_esconder";
        }
	if(option == "Paciente"){
            document.getElementById("paciente_esconder").style.display ="block";
            window.location.hash="paciente_esconder";
        }
	if(option == "Medico"){
            document.getElementById("medico_esconder").style.display ="block";
            window.location.hash="medico_esconder";
        }
	if(option == "Profissional da Saúde"){
            document.getElementById("profissional_esconder").style.display ="block";
            window.location.hash="profissional_esconder";
        }
		
</script>

[Carlos Colon 0]

Obrigado mesmo cara, tu me ajudou pra caramba, e principalmente não apenas copiei, aprendi...