Two arguments within a Javascript function

Question

I have this function with the argument '.edit_data':

$(document).on('click', '.edit_data', function(){  
           var employee_id = $(this).attr("Id");  
           $.ajax({  
                url:"./fetch16",  
                method:"POST",  
                data:{employee_id:employee_id},  
                dataType:"json",  
                success:function(data){         

                     $('#data11').val(data.data);
                     $('#Dia11').val(data.Dia);
                     $('#Fim11').val(data.Fim);
                     $('#Inicio11').val(data.Inicio);
                     $('#Colaborador11').val(data.Colaborador);                      
                     $('#employee_id').val(data.Id);
                     $('#insert').val("Gravar");                     
                     $('#exampleModal').modal('show');               
                }  
           });  
      }); 

And I have this function with the argument '.edit_data1':

$(document).on('click', '.edit_data1', function(){  
           var employee_id1 = $(this).attr("Id");  
           $.ajax({  
                url:"./fetch16",  
                method:"POST",  
                data:{employee_id1:employee_id1},  
                dataType:"json",  
                success:function(data){         
                     $('#data12').val(data.data);
                     $('#Dia12').val(data.Dia);
                     $('#Fim12').val(data.Fim);
                     $('#Inicio12').val(data.Inicio);
                     $('#Colaborador12').val(data.Colaborador);                      
                     $('#employee_id1').val(data.Id);
                     $('#insert1').val("Gravar");                    
                     $('#exampleModal1').modal('show');              
                }  
           });  
      }); 

I wanted to create a single function with both arguments.

<div id="dataModal" class="modal fade" style="margin-top: 12em">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Quarta e Sexta (9H - 12H)</h4>
      </div>
      <div class="modal-body" id="employee_detail">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="margin-top: 12em">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><strong>Quarta e Sexta (9H - 12H)</strong></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="insert_form">
          <div class="col-md-4 col-xs-4">
            <div class="form-group">
              <h6><label for="Data Limpeza-name" class="col-form-label">Data Limpeza</label></h6>
              <h6><input type="date" name="data" id="data" value="<?php echo date(" Y-m-d ");?>" readonly="true"></h6>
            </div>
          </div>
          <div class="col-md-4 col-xs-4">
            <div class="form-group">
              <h6><label for="Dia-name" class="col-form-label">Dia Semana</label></h6>
              <h6><input type="text" name="Dia" id="Dia" value="<?php echo $dia?>" readonly="true"></h6>
            </div>
          </div>
          <div class="row">
          </div>
          <div class="col-md-2 col-xs-2">
            <div class="form-group">
              <h6><label for="Inicio-name" class="col-form-label">Inicio</label></h6>
              <h6><input type="time" name="Inicio" id="Inicio" value="09:00" readonly="true"></h6>
            </div>
          </div>
          <div class="col-md-2 col-xs-2">
            <div class="form-group">
              <h6><label for="Fim-name" class="col-form-label">Fim</label></h6>
              <h6><input type="time" name="Fim" id="Fim" value="12:00" readonly="true"></h6>
            </div>
          </div>
          <div class="row">
          </div>
          <div class="col-md-4 col-xs-4">
            <div class="form-group">
              <h6><label for="Colaborador-text" class="col-form-label">Colaborador</label></h6>
              <h6>
                <select style="width:150px" name="Colaborador" id="Colaborador" required>

                  <option></option>

                  <?php

$sql = "SELECT Funcionario FROM centrodb.InfoLuvas WHERE Ativo = '1' AND Funcao = 'Limpeza' AND Valencia = 'LAR'";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
  echo '<option value="'.$ln['Funcionario'].'">'.$ln['Funcionario'].'</option>';
}
?>
                </select>
              </h6>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
            <input type="hidden" name="employee_id" id="employee_id" />
            <input type="submit" name="insert" id="insert" value="Registo" data-toggle="modal" class="btn btn-success" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

I suggest you create a pattern for the id’s, where one would be #data1 and another #data2, for example, and not #data11 and #data12. It would be easier to use the same block of code by changing only the final number (between 1 or 2).

See that the way you’re doing it doesn’t have a defined pattern: an id’s have a 11 and others 12, and others have no number and others have only one 1.

This way, you can use both classes in the same selector:

$(document).on('click', '.edit_data, .edit_data1', function(){ 
                              ↑           ↑

Then you check if the element clicked has one of the two classes and adjusts the variables and the id’s according to the element clicked (in the example below I am checking if the element clicked has the class .edit_data1):

$(document).on('click', '.edit_data, .edit_data1', function(){  

   // verifica se o elemento clicado possui a classe .edit_data1
   var el = $(this).hasClass("edit_data1");

   // pega a id do elemento
   var employee_id = $(this).attr("id");

  // declara o objeto data do Ajax pela classe .edit_data
   var dat = {employee_id:employee_id};

   // variável com valor "1" que será usada para concatenar nas id's
   var ids = 1;

   // se o elemento clicado possui a classe .edit_data1
   if(el){
      // altera o data
      dat = {employee_id1:employee_id};
      // altera também os id's
      ids = 2;
   }

   $.ajax({  
      url:"./fetch16",  
      method:"POST",  
      data: dat,  
      dataType:"json",  
      success:function(data){
         $('#data'+ids).val(data.data);
         $('#Dia'+ids).val(data.Dia);
         $('#Fim'+ids).val(data.Fim);
         $('#Inicio'+ids).val(data.Inicio);
         $('#Colaborador'+ids).val(data.Colaborador);                      
         $('#employee_id'+ids).val(data.Id);
         $('#insert'+ids).val("Gravar");                    
         $('#exampleModal'+ids).modal('show');              
      }  
   });
});