1

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>

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

4
  • 2
    Un botón no tiene cambios, por lo tanto ese evento nunca se ejecutará. Creo que quieres poner ese evento es al select y no al div.btn Commented el 13 jun. 2022 a las 19:51
  • 1
    ¿y como lo haces para cambiar el <a>? ¿dinamicamente? ¿y tiene atributo value? Creo que no tienes claro lo que estas haciendo. Explícalo un poco para entenderte mejor, pues lo que pones como código en el onchange del elemento <a> no tiene sentido ahora mismo.
    – masterguru
    Commented el 13 jun. 2022 a las 19:51
  • Por favor edita la pregunta para que podamos utilizar el código y verificarlo. También sería de valor que indiques cual es el problema y el código donde envías al AJAX
    – Liyo
    Commented el 13 jun. 2022 a las 19:51
  • Pense que el onchange desde un boton ya captaba los value de los select. Respuesta: No. Si no quieres usar el onchange en el select entonces puedes agregarlo en el javascript mediante un $("#slc_estado").on("change", funtion(){}) y poner dentro del function lo que necesites
    – masterguru
    Commented el 13 jun. 2022 a las 20:16

2 respuestas 2

1

El evento onChange solo es un evento utilizado para todo lo que puedas seleccionar o digitar o chekear en un formulario.

Los botones no tienen un evento onChange ya que a nivel de programacion no produce ningun cambio, mientras que el evento onClick ese evento si lo tiene porque al boton se le puede dar click (obviamente). Pero onChange no existe en un boton.

Para ello te puedo dar esta solucion:

function alerta1(valor){
alert(valor);
}

function alerta2(valor){
alert(valor);
}
<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" 
        onClick="alerta1('hola');alerta2('adios');" >Buscar</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Puedes ejecutar dos cosas en el evento onClick si lo que buscas es que lo haga al hacer click, pero si buscas que el cambio lo haga cuando cambie algo en el formulario, agregalo en el input, select etc... que debe de cambiar su valor, para que pueda ejecutarse una funcion de esta manera:

function alerta1(valor){
alert(valor);
}

function alerta2(valor){
alert(valor);
}
<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" onChange="alerta1('Esta funcion se ejecuta cuando el valor de un select cambia, se selecciono el valor: '+$(this).val());">       
                <option value="1">Activos</option>
                <option value="0">Inactivos</option>                                        
            </select>
        </div>    
        <a class="btn btn-success" title="Registrar operador" 
        onClick="alerta1('hola');alerta2('adios');" >Buscar</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Otra cosa que cabe mencionar, es que tienes este boton

<a class="btn btn-success" title="Registrar operador" onChange="tablaOperadores($(this).val())"
        onClick="$('#listaOperadores').DataTable().destroy()" >Buscar</a>

El problema es esta parte $(this).val() las etiquetas a por lo general no tienen un atributa value donde puedas extraer el valor. Por lo que no funcionara esa parte, ten en cuenta que $(this) se utiliza para decirle al codigo que estas seleccionando la etiqueta a en este caso. Es decir que segun la logica estas seleccionando el valor de la etiqueta a si lo que buscas es extraer el valor de uno de tus select mejor haz esto

$('#slc_estado').val()

Con el # haces referencia al id del select extrayendo su valor que segun haz puesto puede ser uno o cero (activo o inactivo).

Espero te ayude esta respuesta

1
  • sii! muchísimas gracias por el esfuerzo de intentar interpretarme , es que soy nuevo y pense que escribir mucho era confuso!
    – emanuel
    Commented el 13 jun. 2022 a las 21:02
1

Esto y con la ayuda de @DagsDroid pude

<button type="button" 
        class="btn btn-success" 
        title="registrar" 
        style="font-size: 12px; width: 50%%; display: block;" 
        id="Buscar Operador"
        onClick="tablaOperadores($('#slc_tipoOperador').val());$('#listaOperadores').DataTable().destroy()"
>
  <i class="fa fa-check"></i> Buscar
</button>

El problema era que el botón no puede ejecutar un onchange, dejé el onClick y le pase los parámetros del select.

0

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.