Skip to main content
estoy trabajando en codeigniter, cuando ponia el evento onchange en cada select , obtenía los value y el response. Pero cuando agrego el onchange al boton, no aplica, mas que el onclick
Origen Enlace

boton botón no ejecuta onChange

las etiquetas js

var idtipo_Operador = $('#slc_tipoOperador').val();
     
listaTipoOperador(id_operador);

var estado = $('#slc_estado').val();
                 
tablaOperadores(estado);
tablaOperadores();

el ajax

$.ajax({

                type: "GET",
                url: "api/operadores/tabla_operador/"  + idtipo_operador + "/" + estado ,
                
                    success: function(response)
                        {
                        
                            let thead = '<thead><tr class="info"><th style="width: 10%; padding: 0px; padding-left: 10px;">Id</th><th style="width: 50%; padding: 0px; padding-left: 10px;">Nombre</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Tipo</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Estado</th><th style="width: 20%; padding: 0px;">&nbsp;</th></tr></thead>';
                            
                            response.forEach (elemento => {

                                            

                                thead += '<tr>'+
                            '<td style="padding: 0px; font-size: 12px; padding-left: 5px; vertical-align: middle;">' + elemento.idoperador + '</td>'+
                            '<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.nombre_apellido + '</td>' +
                            '<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.tipo_operador + '</td>' +
                            '<td style="padding: 0px; font-size: 12px; padding-left: 20px; vertical-align: middle;">' + (elemento.estado == 0 ? 'Inactivo' : 'Activo') + '</td>' +
                            '<td style="height: 5px; padding: 4px;" align="center">' +
                            '<a class="btn btn-xs bg-navy " style="margin:2px" id="ver" title="Ver Datos del Operador" onclick="cargarOperador ( ' +  elemento.idoperador + ', `edit` ,' + elemento.id_usuario + ' );"><i class= "fa fa-eye "></i></a>' +
                            '<a class="btn btn-xs btn-info" style="margin:2px" id="editar" title="Actualizar Datos del operador" onclick="cargarOperador( ' +  elemento.idoperador + ', `this` ,' + elemento.id_usuario + ' );"><i class="fa fa-pencil-square-o "></i></a>'+
                            '<a class="btn btn-xs bg-yellow" style="margin:2px" title="Cambiar Estado" onclick="cambiarEstado(' +  elemento.idoperador + ',' + elemento.estado + ');"><i class="fa fa-exchange " ></i></a>'+
                            '</td>' +'</tr>';       
                        });
                                
                                 
                                $('#listaOperadores').html(thead);
                    
                                $('#listaOperadores').DataTable();
                                                                                         
                    }
            });  

si agrego un form al html , me refresca la pagina y es todo lo que no quiero hacer utilizando ajax. Pense que el onchange desde un boton ya captaba los value de los select

boton no ejecuta onChange

botón no ejecuta onChange

las etiquetas js

var idtipo_Operador = $('#slc_tipoOperador').val();
     
listaTipoOperador(id_operador);

var estado = $('#slc_estado').val();
                 
tablaOperadores(estado);
tablaOperadores();

el ajax

$.ajax({

                type: "GET",
                url: "api/operadores/tabla_operador/"  + idtipo_operador + "/" + estado ,
                
                    success: function(response)
                        {
                        
                            let thead = '<thead><tr class="info"><th style="width: 10%; padding: 0px; padding-left: 10px;">Id</th><th style="width: 50%; padding: 0px; padding-left: 10px;">Nombre</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Tipo</th><th style="width: 10%; padding: 0px; padding-left: 10px;">Estado</th><th style="width: 20%; padding: 0px;">&nbsp;</th></tr></thead>';
                            
                            response.forEach (elemento => {

                                            

                                thead += '<tr>'+
                            '<td style="padding: 0px; font-size: 12px; padding-left: 5px; vertical-align: middle;">' + elemento.idoperador + '</td>'+
                            '<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.nombre_apellido + '</td>' +
                            '<td style="padding: 0px; font-size: 12px; vertical-align: middle;">' + elemento.tipo_operador + '</td>' +
                            '<td style="padding: 0px; font-size: 12px; padding-left: 20px; vertical-align: middle;">' + (elemento.estado == 0 ? 'Inactivo' : 'Activo') + '</td>' +
                            '<td style="height: 5px; padding: 4px;" align="center">' +
                            '<a class="btn btn-xs bg-navy " style="margin:2px" id="ver" title="Ver Datos del Operador" onclick="cargarOperador ( ' +  elemento.idoperador + ', `edit` ,' + elemento.id_usuario + ' );"><i class= "fa fa-eye "></i></a>' +
                            '<a class="btn btn-xs btn-info" style="margin:2px" id="editar" title="Actualizar Datos del operador" onclick="cargarOperador( ' +  elemento.idoperador + ', `this` ,' + elemento.id_usuario + ' );"><i class="fa fa-pencil-square-o "></i></a>'+
                            '<a class="btn btn-xs bg-yellow" style="margin:2px" title="Cambiar Estado" onclick="cambiarEstado(' +  elemento.idoperador + ',' + elemento.estado + ');"><i class="fa fa-exchange " ></i></a>'+
                            '</td>' +'</tr>';       
                        });
                                
                                 
                                $('#listaOperadores').html(thead);
                    
                                $('#listaOperadores').DataTable();
                                                                                         
                    }
            });  

si agrego un form al html , me refresca la pagina y es todo lo que no quiero hacer utilizando ajax. Pense que el onchange desde un boton ya captaba los value de los select

Origen Enlace

boton no ejecuta onChange

Me funciona el evento onclick, pero el evento onChange no aplica los value al ajax donde lo envio. si me funcionaba cuando el onChange lo agregaba a cada select.

<div class="col-md-6">

        <div class="col-sm-2">
            <select class="form-control" id="slc_tipoOperador" name="slc_tipoOperador" >
                                            
            </select>

        </div>
        <div class="col-sm-2">
            <select class="form-control" id="slc_estado" name="slc_estado">       
                <option value="1">Activos</option>
                <option value="0">Inactivos</option>                                        
            </select>
        </div>    
        <a class="btn btn-success" title="Registrar operador" onChange="tablaOperadores($(this).val())"
        onClick="$('#listaOperadores').DataTable().destroy()" >Buscar</a>
</div>