0

Boa noite pessoal!

Tenho uma lista de pessoas que retorna de uma consulta usando um WHILE, cada um com seu ID. Passo esse ID para uma janela MODAL (Bootstrap), aonde vou cadastrar as férias. Usou o javascript que ao selecionar no SELECT, mostrar ou não os campos (input). O problema é que só funciona na primeira janela MODAL e ainda, o que faça nas outras reflete na primeira.

JANELA MODAL *************************************

        <!-- Inicio Modal CADASTRAR-->
        <div class="modal fade" id="myModalcad<?php echo $linhas['id_mil']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">                          
                        <h3 class="modal-title text-center" id="myModalLabel">Cadastrar Férias <?php echo $planoano; ?></h3>
                        <h3 class="modal-title text-center" id="myModalLabel">
                            <strong>
                                <?php echo $posicao['sigla']." ".$qualifica['qualifica']." ".$linhas['nome']; ?>        
                            </strong>
                        </h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="POST" action="processos/proc_cad.php">
                                <div class="form-group">
                                    <label for="recipient-name" class="control-label">Tipo</label>
                                      <select class="form-control" name="estabila" meta charset="utf-8" onchange="muda(this);" required>
                                            <option>Selecione</option>
                                            <option value="10">10 dias</option>
                                            <option value="15">15 dias</option>
                                            <option value="30">30 dias</option>
                                      </select>
                                </div>
                                <div class="form-group" id="divdata_1p" style='display:none'>
                                    <label for="message-text" class="control-label">1º Período</label>
                                        <input type="Date" class="form-control" name="data_1p" id="data_1p" required>   
                                </div>
                                <div class="form-group" id="divdata_2p" style='display:none'>
                                    <label for="message-text" class="control-label">2º Período</label>
                                        <input type="Date" class="form-control" name="data_2p" id="data_2p">    
                                </div>
                                <div class="form-group" id="divdata_3p" style='display:none'>
                                    <label for="message-text" class="control-label">3º Período</label>
                                        <input type="Date" class="form-control" name="data_3p" id="data_3p">    
                                </div>

                                <div class="modal-footer" style='text-align:center'>
                                    <button type="submit" class="btn btn-primary">Cadastrar</button>
                                    <button type="button" class="btn btn-sucess" data-dismiss="modal" id="btncancelar">Cancelar</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fim Modal CADASTRAR-->                 

JAVASCRIPT ***************************************************

function muda(obj){ 
         var i = obj.selectedIndex; 
         var j = obj.options[i].value; 
         if (j=="Selecione") { 
                    document.getElementById('divdata_1p').style.display="none"; //desabilitar
                    document.getElementById('divdata_2p').style.display="none"; //desabilitar
                    document.getElementById('divdata_3p').style.display="none"; //desabilitar

                    document.getElementById('data_1p').value="";  //zera campo
                    document.getElementById('data_2p').value="";  //zera campo
                    document.getElementById('data_3p').value="";  //zera campo
                    } else
         if (j=='10') { 
                    document.getElementById('divdata_1p').style.display="block"; //habilitar 
                    document.getElementById('divdata_2p').style.display="block"; //habilitar
                    document.getElementById('divdata_3p').style.display="block"; //habilitar
                    } else
         if (j=='15') { 
                    document.getElementById('divdata_1p').style.display="block"; //habilitar  
                    document.getElementById('divdata_2p').style.display="block"; //habilitar   
                    document.getElementById('divdata_3p').style.display="none"; //desabilitar

                    document.getElementById('data_3p').value="";  //zera campo
                    } else
         if (j=='30') { 
                    document.getElementById('divdata_1p').style.display="block";   //habilitar
                    document.getElementById('divdata_2p').style.display="none";   //desabilitar
                    document.getElementById('divdata_3p').style.display="none";  //desabilitar

                    document.getElementById('data_2p').value="";  //zera campo
                    document.getElementById('data_3p').value="";  //zera campo
                    }
        }       
1
  • Claro, está usando os mesmos ids em todas as modais.
    – Sam
    Commented 10/06/2018 às 22:44

1 Resposta 1

0

Já que está usando Bootstrap, deveria usar jQuery para controlar o comportamento dos elementos.

O código está sempre pegando os primeiros ids porque você os está repetindo na página, o que é errado: um id deve ser único.

Você pode pegar os elementos pelo name dentro do mesmo form do select, logo, remova todos os ids desnecessários: id="divdata_1p", id="divdata_2p", id="divdata_3p" e os ids dos inputs: id="data_1p", id="data_2p", id="data_3p".

Veja como fica bem mais simples e limpo o código:

function muda(obj){
   var f = $(obj).closest("form"); // seleciona o form
   var j = $(obj).val(); // pega o value selecionado
   if (j=="Selecione") { 
      f.find("[name='data_1p'], [name='data_2p'], [name='data_3p']") // seleciona os inputs pelo name
      .val('') // esvazia
      .closest("div") // seleciona a div pai
      .hide(); // esconde
  } else
   if (j=='10') { 
      f.find("[name='data_1p'], [name='data_2p'], [name='data_3p']")
      .closest("div")
      .show();
   } else
   if (j=='15') {
      f.find("[name='data_1p'], [name='data_2p']")
      .closest("div")
      .show();

      f.find("[name='data_3p']")
      .val('')
      .closest("div")
      .hide();
  } else
   if (j=='30') { 
      f.find("[name='data_1p']")
      .closest("div")
      .show();

      f.find("[name='data_2p'], [name='data_3p']")
      .val('')
      .closest("div")
      .hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Inicio Modal CADASTRAR-->
<div class="modal fade" id="myModalcad1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">                          
               <h3 class="modal-title text-center" id="myModalLabel">Cadastrar Férias <?php echo $planoano; ?></h3>
               <h3 class="modal-title text-center" id="myModalLabel">
                   <strong>
                       <?php echo $posicao['sigla']." ".$qualifica['qualifica']." ".$linhas['nome']; ?>        
                   </strong>
               </h3>
           </div>
           <div class="modal-body">
               <form class="form-horizontal" method="POST" action="processos/proc_cad.php">
                       <div class="form-group">
                           <label for="recipient-name" class="control-label">Tipo</label>
                             <select class="form-control" name="estabila" meta charset="utf-8" onchange="muda(this);" required>
                                   <option>Selecione</option>
                                   <option value="10">10 dias</option>
                                   <option value="15">15 dias</option>
                                   <option value="30">30 dias</option>
                             </select>
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">1º Período</label>
                               <input type="Date" class="form-control" name="data_1p" required>   
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">2º Período</label>
                               <input type="Date" class="form-control" name="data_2p">    
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">3º Período</label>
                               <input type="Date" class="form-control" name="data_3p">    
                       </div>

                       <div class="modal-footer" style='text-align:center'>
                           <button type="submit" class="btn btn-primary">Cadastrar</button>
                           <button type="button" class="btn btn-sucess" data-dismiss="modal" id="btncancelar">Cancelar</button>
                       </div>
               </form>
           </div>
       </div>
   </div>
</div>

<!-- Fim Modal CADASTRAR-->

<div class="modal fade" id="myModalcad2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">                          
               <h3 class="modal-title text-center" id="myModalLabel">Cadastrar Férias <?php echo $planoano; ?></h3>
               <h3 class="modal-title text-center" id="myModalLabel">
                   <strong>
                       <?php echo $posicao['sigla']." ".$qualifica['qualifica']." ".$linhas['nome']; ?>        
                   </strong>
               </h3>
           </div>
           <div class="modal-body">
               <form class="form-horizontal" method="POST" action="processos/proc_cad.php">
                       <div class="form-group">
                           <label for="recipient-name" class="control-label">Tipo</label>
                             <select class="form-control" name="estabila" meta charset="utf-8" onchange="muda(this);" required>
                                   <option>Selecione</option>
                                   <option value="10">10 dias</option>
                                   <option value="15">15 dias</option>
                                   <option value="30">30 dias</option>
                             </select>
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">1º Período</label>
                               <input type="Date" class="form-control" name="data_1p" required>   
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">2º Período</label>
                               <input type="Date" class="form-control" name="data_2p">    
                       </div>
                       <div class="form-group" style='display:none'>
                           <label for="message-text" class="control-label">3º Período</label>
                               <input type="Date" class="form-control" name="data_3p">    
                       </div>

                       <div class="modal-footer" style='text-align:center'>
                           <button type="submit" class="btn btn-primary">Cadastrar</button>
                           <button type="button" class="btn btn-sucess" data-dismiss="modal" id="btncancelar">Cancelar</button>
                       </div>
               </form>
           </div>
       </div>
   </div>
</div>

4
  • DVD....obrigado pela atenção! Commented 12/06/2018 às 0:00
  • De nada amigo. Se resolveu a questão, o correto é marcar ✔️ na resposta. O ícone ✔️ fique ao lado esquerdo da resposta, abaixo das setas. Grato!
    – Sam
    Commented 12/06/2018 às 0:03
  • Desculpe........errei e teclei ENTER........Realmente ficou mais limpo, mas não funcionou. Pior, nem na primeira janela ele funcionou. Não sei se eu disse, mas essa Função Javascript está dentro de um WHILE, ou seja, cada janela MODAL deve atender aos comandos dessa janela independente das outras. Em outro teste que fiz, usei o ID (retornado na consulta PHP) para "enumuerar" os campos......tipo......'data_1p<?php echo $linhas['id']; ?>'..........Funcionou em relação ao SELECT .........mas o Javascript no FUNFOU......... :( Commented 12/06/2018 às 0:10
  • Deveria funcionar. Atualizei a resposta com 2 modais e veja que funciona de forma independente.
    – Sam
    Commented 12/06/2018 às 0:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .