Javascript within WHILE only works once in the Modal window

Question

Javascript within WHILE only works once in the Modal window

Navigation

#1 by (0 votes)

0

Good evening everyone!

I have a list of people who returns from a query using a WHILE, each with its ID. I pass this ID to a MODAL (Bootstrap) window, where I will register the vacation. Used the javascript that when selecting in SELECT, to show or not the fields (input). The problem is that it only works in the first MODAL window and still, what it does in the other reflects in the first one.

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-->

JavaScripts *****

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

asked by anonymous 11.06.2018 / 00:24

1 answer

TOTAL row with SUM of columns using PIVOT I'm learning Open GL and I want to be able to draw the image below, can anyone help with the code?

score 0 · Answer 1

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

The code is always catching the first% s of% s because you are repeating them on the page, which is wrong: id must be unique.

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

See how much simpler and cleaner the code is:

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><!--InicioModalCADASTRAR--><divclass="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>