0

Yo no se por que me ha dado tan duro esto de la delegación de eventos.. ahora traigo un inconveniente....

En este formulario que adiciona campos hijos tengo lo siguiente..

Este formulario adiciona campos hijos al presionar el botón agregar Campos

introducir la descripción de la imagen aquí

Se adicionan los campos que necesito...

introducir la descripción de la imagen aquí

En el campo padre o inicial hay un icono

introducir la descripción de la imagen aquí

Que al seleccionarlo toma el valor de la Fecha y el valor alli seleccionado en ese select

introducir la descripción de la imagen aquí

y abre una ventana nueva onClick="Abrir()" pasando esos valores (placa y Fecha como variables y las usa.. ver funcion Abrir() en esta linea: placaw y fechaw

var url="archivo.php?veh="+placaw+"&ini="+fechaw+"%2000:00:00&fin="+fechaw+"%2023:59:59&emp=190";

hasta allí no hay ningún problema, todo funciona de maravillas

ya que en los campos hijos que se adicionan toma el mismo valor de la placa padre y debería tomar la placa o el valor del select que le corresponde (el valor que se va seleccionando en ese select de esos campos hijos.. (Nota: solo ese es el campo que varia PLACA pues los otras variables FECHA si es la misma.)

introducir la descripción de la imagen aquí

este es el Codigo....

<meta charset="utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulario Detalle Conductores</title>
<link rel="stylesheet" type="text/css" href="css/select2.css">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="js/select2.js"></script>
<script>
jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.selector').select2();
    });
});
</script>
<script>
var fieldHTML3 = '<div id="destino"><label>Placa: </label><select name="placa_info[]" required class="campos selector" id="placa_info"><option value="">Seleccione:</option><option value="ABC-123">ABC-123</option><option value="DEF-456">DEF-456</option></select> <img style="cursor: pointer;" src="lupagps.fw.png" title="Visualizar Listado Ruta" width="16" height="18" onclick="Abrir()"> <label>Hora Salida: </label><input name="sp[]" type="text" class="hora1" autocomplete="off" id="sp" size="3" maxlength="5" required/> <label>Hora Final: </label><input name="hf[]" type="text" class="hora2" autocomplete="off" id="hf" size="3" maxlength="5" required/><label> Guarda: </label><input name="hg[]" type="text" class="hora1" id="hg" autocomplete="off" size="3" maxlength="5"/><label> Ruta: </label><textarea name="rutaad[]" cols="15" id="rutaad"></textarea> <label>Fallos: </label> <textarea name="fallos[]" id="fallos" cols="15"></textarea> <label>Viaje: </label><input name="viajes_m[]" type="text" id="viajes" size="1"/>&nbsp;&nbsp; Hizo Ruta en Corozal De: <input name="spcor[]" type="text" class="hora1" id="spcor" autocomplete="off" size="2" maxlength="5"/> a <input name="hfcor[]" type="text" class="hora2" id="hfcor" autocomplete="off" size="2" maxlength="5"/> <a href="javascript:void(0);" class="remove_button" title="Borrar Viaje"><img src="remove-icon.png" width="20" height="20"/></a>';</script>
  <script>
    $(document).ready(function(){
    var maxField3 = 30; //
    var addButton3 = $('.add_button3'); //agrega
    var wrapper3 = $('.field_wrapper3'); //wrapper  
    var x = 1; //Initial field counter is 1
    $(addButton3).click(function(){ //Once add button is clicked
        if(x < maxField3){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper3).append(fieldHTML3); // Add field html
            // Agrega la funcion Select2 a los campos select hijos---------
            $('.selector').select2();
        }
    });
    $(wrapper3).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
        $(wrapper3).on('keypress','.hora1',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
        $(wrapper3).on('blur','.hora1',formatHour);
        $(wrapper3).on('keypress','.hora2',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
        $(wrapper3).on('blur','.hora2',formatHour);
    
});

</script>  
<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}
</style>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
    position: absolute;
    left: 134px;
    top: 9px;
    width: 848px;
    height: 87px;
    z-index: 1;
}
    .campos{
        width: 100px;
        font-size: 11px;
    }
    #viaje_numero {
  width: 2em;
}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="procesahorasguarin.php">
  <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="15" bgcolor="#FFFFFF" style="text-align:right" >Bienvenido</td>
    </tr>
    <tr>
      <td height="220" bgcolor="#FFA466"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="2">
        <tr>
          <td width="1017"></td>
          <td width="1" colspan="3"></td>
        </tr>
        <tr>
          <td height="26" colspan="4">
            Fecha:
<input name="fecha_info" type="date" max="9999-12-31" required id="fecha_info"/></td>
          </tr>
        <tr>
          <td height="6" colspan="4"><hr /></td>
        </tr>
        <tr>
          <td colspan="4"><table width="100%" border="0" cellpadding="2" cellspacing="2">
            <tr>
              <td height="28" colspan="3"><div class="field_wrapper3">
                <div>
                  <label>Placa: </label>
                  <select id="placa_info" name="placa_info[]" required="required" class="campos selector">
                    <option value="">Seleccione:</option>
                    <option value="ABC-123">ABC-123</option>
                    <option value="DEF-456">DEF-456</option>
                  </select>
                  <img src="lupagps.fw.png" style="cursor: pointer;" title="Visualizar Listado Ruta" width="16" height="18" onClick="Abrir()">
                  <label>Hora Salida: </label>
                  <input name="sp[]" type="text" required class="hora1" id="sp" autocomplete="off" size="3" maxlength="5"/>
                  <label>Hora Final:
                    <input name="hf[]" type="text" required class="hora2" id="hf" autocomplete="off" size="3" maxlength="5"/>
                    Guarda:
                    <input name="hg[]" type="text" class="hora1" id="hg" autocomplete="off" size="3" maxlength="5"/>
                    Ruta:
<textarea name="rutaad[]" cols="15" id="rutaad[]"></textarea>
                    Fallos:
  <textarea name="fallos[]" cols="15" id="fallos[]"></textarea>
                    Viaje:
  <input name="viajes_m[]" type="text" id="viajes_m" size="1" />
                </label>
                  Hizo Ruta en Corozal De: 
                <input name="spcor[]" type="text" class="hora1" id="spcor" autocomplete="off" size="2" maxlength="5"/>
                a 
                 <input name="hfcor[]" type="text" class="hora2" id="hfcor" autocomplete="off" size="2" maxlength="5"/>
                </div>
                 </div>
                <div></div>
                <a href="javascript:void(0);" class="add_button2" title="Agregar"></a></td>
            </tr>
            <tr>
              <td width="160" height="28"></td>
              <td width="704"></td>
              <td width="139"><a href="javascript:void(0);" class="add_button3" title="Agregar Operario de Barrido">Agregar Nuevo <img src="add-icon.png" width="24" height="24"/></a></td>
            </tr>
            <tr>
              <td height="6" colspan="3"><hr /></td>
              </tr>
          </table></td>
          </tr>
        <tr>
          <td colspan="4"><div id="content2" style="display: none;">
            </div></td>
        </tr>
        <tr>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td colspan="4"></td>
          
        </tr>
        <tr>
          <td colspan="4"><input name="botons" type="submit" class="boton" id="button" value="Enviar"/></td>
        </tr>
      </table></td>
    </tr>
  </table>
</form>
</body>
</html>
<script src="scriptcamposhoras.js"></script>
<script>
  function Abrir()
  {
  var fechaw = document.getElementById("fecha_info").value;
var placaw = document.getElementById("placa_info").value;
  var url="archivo.php?veh="+placaw+"&ini="+fechaw+"%2000:00:00&fin="+fechaw+"%2023:59:59&emp=190";
          if(placaw=="" || fechaw==""){
              alert("Agregue primero la Fecha y la Placa para visualizar el listado de la ruta");
              return;
          }else{
     window.open(url, "Visualizar", "height=850px,width=700px,scrollTo=0,resizable=0,scrollbars=No,left=300pt,top=50pt,menubar=no");
          }
  }
  </script>
2
  • podrias formular tu pregunta mejor? no logro comprender del todo lo que deseas!
    – Bryro
    Commented el 15 nov. a las 16:07
  • @Bryro Listo!! modificada la pregunta!!!
    – Eduardo
    Commented el 15 nov. a las 19:00

1 respuesta 1

2

para elementos dinamicos se requiere de un "delegate" con js o jquery es sencillo, mira te explico:

1.- Los elementos que se agregan después de que haya cargado la página, no pueden ser escuchados sus eventos directamente.

2.- Se necesita un elemento "padre" que contendrá los elementos que le vayas agregando y a su ves este escuchará el evento click y se lo delegará a los nuevos elementos que se dibujen dentro del mismo.

En Jquery sería de esta forma:

$('#padre').on('click', 'elementoRecienAgregado', function(){
$(this).val(); // Aquí la variable this contiene la información del elemento al que le diste click, en este caso a "elementoRecienAgregado"

});

// Me tome la libertad de copiar tu código donde ya esta funcionando recuperando los valores que deseas:

var fieldHTML3 = '<div id="destino" class="item-destino"><label>Placa: </label><select name="placa_info[]" required class="campos selector" id="placa_info"><option value="">Seleccione:</option><option value="ABC-123">ABC-123</option><option value="DEF-456">DEF-456</option></select> <img style="cursor: pointer;" src="https://fakeimg.pl/600x400" title="Visualizar Listado Ruta" class="abrir" width="16" height="18"> <label>Hora Salida: </label><input name="sp[]" type="text" class="hora1" autocomplete="off" id="sp" size="3" maxlength="5" required/> <label>Hora Final: </label><input name="hf[]" type="text" class="hora2" autocomplete="off" id="hf" size="3" maxlength="5" required/><label> Guarda: </label><input name="hg[]" type="text" class="hora1" id="hg" autocomplete="off" size="3" maxlength="5"/><label> Ruta: </label><textarea name="rutaad[]" cols="15" id="rutaad"></textarea> <label>Fallos: </label> <textarea name="fallos[]" id="fallos" cols="15"></textarea> <label>Viaje: </label><input name="viajes_m[]" type="text" id="viajes" size="1"/>&nbsp;&nbsp; Hizo Ruta en Corozal De: <input name="spcor[]" type="text" class="hora1" id="spcor" autocomplete="off" size="2" maxlength="5"/> a <input name="hfcor[]" type="text" class="hora2" id="hfcor" autocomplete="off" size="2" maxlength="5"/> <a href="javascript:void(0);" class="remove_button" title="Borrar Viaje"><img src="https://fakeimg.pl/600x400" width="20" height="20"/></a>';
$(document).ready(function(){
    var maxField3 = 30; //
    var addButton3 = $('.add_button3'); //agrega
    var wrapper3 = $('.field_wrapper3'); //wrapper  
    var x = 1; //Initial field counter is 1
    $(addButton3).click(function(){ //Once add button is clicked
        if(x < maxField3){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper3).append(fieldHTML3); // Add field html
            // Agrega la funcion Select2 a los campos select hijos---------
            //$('.selector').select2();
        }
    });
    $(wrapper3).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
        //$(wrapper3).on('keypress','.hora1',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
        //$(wrapper3).on('blur','.hora1',formatHour);
        //$(wrapper3).on('keypress','.hora2',validateHour); //para el elemento dentro de destino que tenga la clase "hora", cuando se presione la tecla ejecuta la función validateHour
//            $(wrapper3).on('blur','.hora2',formatHour);
  
  // Aquí esta el DELEGATE... sustituye la funcion abrir
   $('#parentDestinos').on('click','.abrir',function(){
    const parent = $(this).parents('.item-destino');
    const fechaw = $("#fecha_info").val();
    const placaw = $(parent).find("select").val();   
    var url="archivo.php?veh="+placaw+"&ini="+fechaw+"%2000:00:00&fin="+fechaw+"%2023:59:59&emp=190";
    
    console.log( url )
  });
    
});


  /*function Abrir()
  {
     var fechaw = document.getElementById("fecha_info").value;
    var placaw = document.getElementById("placa_info").value;
    var url="archivo.php?veh="+placaw+"&ini="+fechaw+"%2000:00:00&fin="+fechaw+"%2023:59:59&emp=190";
          if(placaw=="" || fechaw==""){
              alert("Agregue primero la Fecha y la Placa para visualizar el listado de la ruta");
              return;
          }else{
     window.open(url, "Visualizar", "height=850px,width=700px,scrollTo=0,resizable=0,scrollbars=No,left=300pt,top=50pt,menubar=no");
          }
  }*/
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

#apDiv1 {
    position: absolute;
    left: 134px;
    top: 9px;
    width: 848px;
    height: 87px;
    z-index: 1;
}
    .campos{
        width: 100px;
        font-size: 11px;
    }
    #viaje_numero {
  width: 2em;
}
<!-- https://es.stackoverflow.com/questions/627698/dato-variable-en-campos-hijos  -->
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Formulario Detalle Conductores</title>
      <link rel="stylesheet" type="text/css" href="css/select2.css">
      <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
      <!--<script src="js/select2.js"></script>-->
      <link href="estilos.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <form id="form1" name="form1" method="post" action="procesahorasguarin.php">
         <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
               <td height="15" bgcolor="#FFFFFF" style="text-align:right" >Bienvenido</td>
            </tr>
            <tr>
               <td height="220" bgcolor="#FFA466">
                  <table width="100%" border="0" align="center" cellpadding="2" cellspacing="2">
                     <tr>
                        <td width="1017"></td>
                        <td width="1" colspan="3"></td>
                     </tr>
                     <tr>
                        <td height="26" colspan="4">
                           Fecha:
                           <input name="fecha_info" type="date" max="9999-12-31" required id="fecha_info"/>
                        </td>
                     </tr>
                     <tr>
                        <td height="6" colspan="4">
                           <hr />
                        </td>
                     </tr>
                     <tr>
                        <td colspan="4">
                           <table width="100%" border="0" cellpadding="2" cellspacing="2">
                              <tr>
                                 <td height="28" colspan="3">
                                    <div id="parentDestinos" class="field_wrapper3">
                                       <div class="item-destino">
                                          <label>Placa: </label>
                                          <select id="placa_info" name="placa_info[]" required="required" class="campos selector">
                                             <option value="">Seleccione:</option>
                                             <option value="ABC-123">ABC-123</option>
                                             <option value="DEF-456">DEF-456</option>
                                          </select>
                                          <img  src="https://fakeimg.pl/600x400" style="cursor: pointer;" title="Visualizar Listado Ruta" width="20" height="20" class="abrir">
                                          <label>Hora Salida: </label>
                                          <input name="sp[]" type="text" required class="hora1" id="sp" autocomplete="off" size="3" maxlength="5"/>
                                          <label>
                                          Hora Final:
                                          <input name="hf[]" type="text" required class="hora2" id="hf" autocomplete="off" size="3" maxlength="5"/>
                                          Guarda:
                                          <input name="hg[]" type="text" class="hora1" id="hg" autocomplete="off" size="3" maxlength="5"/>
                                          Ruta:
                                          <textarea name="rutaad[]" cols="15" id="rutaad[]"></textarea>
                                          Fallos:
                                          <textarea name="fallos[]" cols="15" id="fallos[]"></textarea>
                                          Viaje:
                                          <input name="viajes_m[]" type="text" id="viajes_m" size="1" />
                                          </label>
                                          Hizo Ruta en Corozal De: 
                                          <input name="spcor[]" type="text" class="hora1" id="spcor" autocomplete="off" size="2" maxlength="5"/>
                                          a 
                                          <input name="hfcor[]" type="text" class="hora2" id="hfcor" autocomplete="off" size="2" maxlength="5"/>
                                       </div>
                                    </div>
                                    <div></div>
                                    <a href="javascript:void(0);" class="add_button2" title="Agregar"></a>
                                 </td>
                              </tr>
                              <tr>
                                 <td width="160" height="28"></td>
                                 <td width="704"></td>
                                 <td width="139"><a href="javascript:void(0);" class="add_button3" title="Agregar Operario de Barrido">Agregar Nuevo <img src="https://fakeimg.pl/600x400" width="24" height="24"/></a></td>
                              </tr>
                              <tr>
                                 <td height="6" colspan="3">
                                    <hr />
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                     <tr>
                        <td colspan="4">
                           <div id="content2" style="display: none;">
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td colspan="4"></td>
                     </tr>
                     <tr>
                        <td colspan="4"></td>
                     </tr>
                     <tr>
                        <td colspan="4"><input name="botons" type="submit" class="boton" id="button" value="Enviar"/></td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>

Espero te ayude, modifique la imagen a la que le das click revisalo y comparalo con lo que tienes.

1
  • Maravilloso @Albertomkm Funciono de maravillas mil gracias!!!
    – Eduardo
    Commented el 16 nov. a las 0:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.