Javascript inside WHILE only works once in the Modal window

Asked

Viewed 32 times

0

Good evening, everyone!

I have a list of people returning from a query using a WHILE, each with their ID. I pass this ID to a MODAL window (Bootstrap), where I will register the holidays. You used the javascript that when selecting in SELECT, show or not the fields (input). The problem is that it only works in the first MODAL window and still, what to do in the others reflects in the first.

MODAL WINDOW *************************************

        <!-- 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
                    }
        }
javascript modal

  • Of course, it is using the same ids in all modals.

1 answer

0

Since you are using Bootstrap, you should use jQuery to control the behavior of the elements.

The code is always getting the first ones ids because you are repeating them on the page, which is wrong: a id must be unique.

You can take the elements by name within the same form of select, so, remove all the ids unnecessary: id="divdata_1p", id="divdata_2p", id="divdata_3p" and the ids of inputs: id="data_1p", id="data_2p", id="data_3p".

See how much simpler and clean the code:

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>

  • DVD.... thank you for your attention!

  • No friends. If you solved the question, the correct is to mark in the answer. The icon is on the left side of the answer, below the arrows. Grateful!

  • Sorry........ I made a mistake and I typed ENTER........ It really got cleaner, but it didn’t work. Worse, even in the first window it didn’t work. I don’t know if I said it, but this Javascript function is inside a WHILE, IE, each MODAL window must meet the commands of this window independent of the others. In another test I did, I used the ID (returned in the PHP query) to "enumuerar" the fields......type...'data_1p<? php echo $lines['id']; ? >'.......... It worked in relation to SELECT ......but Javascript in FUNFOU......... :(

  • It should work. I updated the answer with 2 modals and see that it works independently.

Browser other questions tagged javascript modal

You are not signed in. Login or sign up in order to post.