Ir para conteúdo
Fórum Script Brasil
  • 0

Problemas para mostrar / ocultar divs com javascript


mm_edilson

Pergunta

Tenho um formulário html com vários selects. Dois deles são usados para mostrar/ocultar duas divs respectivamente, quando a opção 8 é clicada, e esconder, quando clicar em qualquer outra opção. 

Tenho uma instrução javascript que mantém a opção selecionada mesmo após clicar no botão submit. 

Até aqui Funciona. Mas quero que, ao clicar no botão "submit" a div permaneça exibida, uma vez que a opção 8 do select permanece selecionada. 

Mas só funciona no primeiro caso, o segundo apaga a div ao clicar no submit. 

Segue o código:

 

...

<td>
                            <label>Faixa Etária:</label><br>
                            <select name="fxet" id="fxet" class="fxet" onchange="mostraDiv()">
                                <option value="0"<?php if(isset($_POST['fxet']) && $_POST['fxet'] == '0') echo 'selected'; ?>>Todas as idades</option>
                                <option value="1" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '1') echo 'selected'; ?>>Crianças - 0 a 8 anos</option>
                                <option value="2" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '2') echo 'selected'; ?>>Juniores - 9 a 11 anos</option>
                                <option value="3" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '3') echo 'selected'; ?>>Adolescentes - 12 a 17 anos</option>
                                <option value="4" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '4') echo 'selected'; ?>>Jovens - 18 a 34 anos</option>
                                <option value="5" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '5') echo 'selected'; ?>>Adultos - 35 a 59 anos</option>
                                <option value="6" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '6') echo 'selected'; ?>>Idosos - 60 a 74 anos</option>
                                <option value="7" <?php if(isset($_POST['fxet']) && $_POST['fxet'] == '7') echo 'selected'; ?>>Idosos maiores - 75 anos acima</option>
                                <option value="8"<?php if(isset($_POST['fxet']) && $_POST['fxet'] == '8') echo 'selected'; ?>>Personalizado</option>
 </select>&nbsp&nbsp
                        </td>
                        <td>
                            
                            <div id="personm" style="<?php if(isset($_POST['fxet']) && $_POST['fxet'] == '8') echo 'display:block;'; else echo 'display:none;'; ?>">
  <label>De:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspA:</label><br>
  <input type="number" name="ini_m" id="idadeini" min="0" max="120">&nbsp<input type="number" name="fin_m"id="idadefin" min="0" max="120">
</div>
                        </td>
                        <td>
                            <div class="div_botao_pesquisa"><br><input type="submit" name="but_pesquisa_membros" id="but_pesquisa_membros" class="but_pesquisa_membros" value="Pesquisar_m"></div>
                        </td>
                    </tr>
                </table>
<td>
  
  ...
  ...
  ...
                            <label>Faixa Etária:</label><br>
                            <select name="fxet2" id="fxet2" class="fxet2" onchange="mostraDiv2()">
                                <option value="0"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '0') echo 'selected'; ?>>Todas as idades</option>
                                <option value="1"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '1') echo 'selected'; ?>>Crianças - 0 a 8 anos</option>
                                <option value="2"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '2') echo 'selected'; ?>>Juniores - 9 a 11 anos</option>
                                <option value="3"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '3') echo 'selected'; ?>>Adolescentes - 12 a 17 anos</option>
                                <option value="4"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '4') echo 'selected'; ?>>Jovens - 18 a 34 anos</option>
                                <option value="5"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '5') echo 'selected'; ?>>Adultos - 35 a 59 anos</option>
                                <option value="6"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '6') echo 'selected'; ?>>Idosos - 60 a 74 anos</option>
                                <option value="7"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '7') echo 'selected'; ?>>Idosos maiores - 75 anos acima</option>
                                <option value="8"<?php if(isset($_POST['fxet2']) && $_POST['fxet2'] == '8') echo 'selected'; ?>>Personalizado</option>
                            </select>&nbsp&nbsp
                        </td>
                        <td><div id="personm2" style="display:none">
                            <label>De:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspA:</label><br>
                            <input type="number" name="ini_nm" id="idadeini" min="0" max="120">&nbsp<input type="number" name="fin_nm" id="idadefin" min="0" max="120">
                        </div></td>
                        <td>
                            <div class="div_botao_pesquisa"><br><input type="submit" name="but_pesquisa_nao_membros" id="but_pesquisa_nao_membros" class="but_pesquisa_nao_membros" value="Pesquisar_NM"></div>
                        </td>
                    </tr>
                </table>

Eis o javascript

  document.getElementById("personm").style.display = "none";
  document.getElementById("personm2").style.display = "none";

function mostraDiv() {
  if (document.getElementById("fxet").value == "8") {
    document.getElementById("personm").style.display = "block";
  } else {
    document.getElementById("personm").style.display = "none";
  }
}

document.getElementById("but_pesquisa_membros").addEventListener("click", function() {
  if (document.getElementById("fxet").value == "8") {
    document.getElementById("personm").style.display = "block";
  }
});

function mostraDiv2() {
  if (document.getElementById("fxet2").value == "8") {
    document.getElementById("personm2").style.display = "block";
  } else {
    document.getElementById("personm2").style.display = "none";
  }
}

document.getElementById("but_pesquisa_nao_membros").addEventListener("click", function() {
  if (document.getElementById("fxet2").value == "8") {
    document.getElementById("personm2").style.display = "block";
  }
});

A função mostraDiv() funciona, mas a mostradiv2() não. Quando clico no botão submit, no segundo caso, a div personm2 deveria permanecer visível, mas ela some. 

Alguém pode dar uma força?

Sei que o código tá meio gambiarrado, mas é que estou aprendendo... 🙂 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...