Jump to content
Fórum Script Brasil
  • 0

Problemas para mostrar / ocultar divs com javascript


mm_edilson

Question

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 to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...