Skip to main content
se añadieron 29 caracteres en el cuerpo
Origen Enlace
Eduardo
  • 375
  • 1
  • 9

pero esta función que hace que se pase el cursor entre estos campos (hora1 y hora2 operario) en automático pero solo funciona en los campos padres No en los creados... como hago para incluir esa función para que igualmente sea invocada (así como lo hace con select2 que funciona sin problema.)

pero esta función que hace que se pase el cursor entre estos campos automático pero solo funciona en los campos padres No en los creados... como hago para incluir esa función para que igualmente sea invocada (así como lo hace con select2 que funciona sin problema.)

pero esta función que hace que se pase el cursor entre estos campos (hora1 y hora2 operario) en automático pero solo funciona en los campos padres No en los creados... como hago para incluir esa función para que igualmente sea invocada (así como lo hace con select2 que funciona sin problema.)

Origen Enlace
Eduardo
  • 375
  • 1
  • 9

pasar funcion a script en campos dinamicos

Hola a todos tengo un formulario el cual genera campos y esos campos creados pude ponerle la accion select2 poniendole una linea $('.selector').select2(); al js para invocar a los campos creados dinámicamente esa opción ya que sin esa linea solo lo hacia el campo padre.

aqui pongo parte de ese codigo.. comente la parte del codigo asi (/// POR FINNNNNNNNNNNNNNNNNNNN)donde esta la linea que hace la magia, la que hace que se incluya esa funcion select2 en los campos creados.

<script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        //name="hora1" type="text" autofocus="autofocus" class="hora1" id="hora1" size="5"
                //New input field html
        var x = 1; //Initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); // Add field html.
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
        $(wrapper).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
        $(wrapper).on('blur','.hora1',formatHour);
        $(wrapper).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
        $(wrapper).on('blur','.hora2',formatHour);
    });
////-----------------------PARA LOS CAMPOS HIJOS--------------------------------
        $(document).ready(function(){
    var maxField2 = 10; //
    var addButton2 = $('.add_button2'); //agrega
    var wrapper2 = $('.field_wrapper2'); //wrapper  
    var x = 1; //Initial field counter is 1
    $(addButton2).click(function(){ //Once add button is clicked
        if(x < maxField2){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper2).append(fieldHTML2); // Add field html
            /// POR FINNNNNNNNNNNNNNNNNNNN
             $('.selector').select2();       
             console.log(x);
        }
    });
    $(wrapper2).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
        console.log(x);
    });
});
<!----------------------------PARTE (AQUI)---------------------------------------------------->
 var fieldHTML2 = '<div id="destino2"><label>Operador: </label><select name="operario[]" style="width:500px" required class="campos selector"><option value="">Seleccione:</option><?php if (($_SESSION['tipo']=="admin")||($quien=="Facturacion")||($quien=="Operativo")){$query2 = $mysqli -> query ("SELECT CONCAT(primer_nombre, ' ',primer_apellido, ' ', segundo_apellido) AS trabajador, municipio AS municp FROM datos_archivo WHERE estadotrabajador='ACTIVO' AND cargo IN ('OPERARIO LIMPIEZA','OPERADOR DE BARRIDO/ESCOBITA','OPERADOR SANEAMIENTO BASICO','SUPERVISOR DE RUTAS','OPERADOR SANEAMIENTO BASICO Y BARRIDO') ORDER BY nombre ASC");}else{$query2 = $mysqli -> query ("SELECT CONCAT(primer_nombre, ' ',primer_apellido, ' ', segundo_apellido) AS trabajador, municipio AS municp FROM datos_archivo WHERE estadotrabajador='ACTIVO' AND cargo IN ('OPERARIO LIMPIEZA','OPERADOR DE BARRIDO/ESCOBITA','OPERADOR SANEAMIENTO BASICO','SUPERVISOR DE RUTAS','OPERADOR SANEAMIENTO BASICO Y BARRIDO') AND municipio='$municcc' ORDER BY nombre ASC");}$mysqli->set_charset("utf8");while ($valores2 = mysqli_fetch_array($query2)) { echo '<option value="'.strtoupper($valores2[trabajador]).'">'.strtoupper($valores2[trabajador]).'</option>';}?></select> <?php /*?><label>Apoyo: </label><select name="apoyo[]" id="apoyo" class="campos"><option value="">No</option><option value="Operador de Apoyo a la Recoleccion">Apoyo</option><option value="Operador Foraneo">Foraneo</option>  </select><?php */?> <label>Hora Inicio: </label><input name="hora1_operario[]" type="text" class="hora1 inputs2" autocomplete="off" size="1"/><label> Hora Final: <input name="hora2_operario[]" type="text" class="hora2 inputs2" autocomplete="off" size="1" /></label> <?php /*?>H.E: <input name="he[]" type="checkbox" value="si"/></label><?php */?> Novedad de Operario: <textarea name="novedad_operario[]" cols="30" id="novedadoperario"></textarea> <a href="javascript:void(0);" class="remove_button" title="Borrar Operario de Saneamiento"><img src="remove-icon.png" width="20" height="20"/></a></div>'; //New input field html
  </script>

ahora bien como notan existen unos campos (dentro de fieldHTML2) con la clase (class="campos selector") para tomar la opcion select2 y otra para la funcion campos que llama a la funcion siguiente

<script>
$(document).ready(function(){
    $('.inputs2').keyup(function(){
        if($('.inputs2').val().length==$('.inputs2').attr("maxlength")){
            var ih = $('.inputs2').index('.inputs2');
            $('.inputs2').eq(ih+1).focus();
        }
    });
});
</script>

pero esta función que hace que se pase el cursor entre estos campos automático pero solo funciona en los campos padres No en los creados... como hago para incluir esa función para que igualmente sea invocada (así como lo hace con select2 que funciona sin problema.)