0

He estado leyendo ya varias paginas pero no logro hacer que me funcione, he intentado muchas maneras, tengo el siguiente código que es para enviar datos desde un modal a la base de datos:

    <script>
    $(document).ready(function(){ 
        jQuery('.error').hide(); // Hide Warning Label. 
                var Unidades = $("#Unidades").val(); //valor de un select//
                var Empleado_Actual = $("#Personal").val(); //valor de un select//
                var Estado_Bien = $("#Estado_Bien").val(); //valor de un select//
                var Transferencia = $("#Transferencia").val(); //valor de un select//
              
                e.preventDefault();
                $.ajax({
                type: "post",
                url: "transferirBien.php",
                async:true,
                data:{ // AQUI VAN LOS DATOS//
                     },
                success: function(msg){
                //alert(msg);
                $("#modalTransferir").modal('hide');
                swal("Transferencia del Activo Generada Exitosamente!","haga clic para cerrar","success");
               
                console.log("Alert Callback");  
                location.reload();
                },
                error: function(msg){
                $("#modalTransferir").modal('hide');
                swal("Error!..No se logro realizar la Transferencia","haga clic para cerrar","error");
               
                console.log("Alert Callback");  
                location.reload();       
                }
                });
            });
            
    });
    </script>

Dentro de un modal tengo un breve formulario el cual contiene 4 combobox "Select" y un campo de texto para capturar comentarios, necesito poder validar estos select y el campo de texto para que al cargar el Ajax no lleve datos con valor 0 y quede registrada la información correctamente en la BD.

adjunto el código de uno de los combobox select


    <tbody>
                    <tr>
                        <td>
                            <div>  
                                <select class="form-control form-control-sm" style="font-size:10px;" style="width:100px;"  id="Unidades" name="Unidades" required class="required">
                            <option style="font-size:10px;" style="width:100px;" value="0"  selected="selected">Seleccione la Unidad:</option>
                            <?php include './inc/combos_transferencia/cargarBoxUnidades.php';?>
                            </select> 
                            </div>  
                        </td>
                    </tr>
                </tbody>

leyendo por aquí y allá encontré este código que si me funciona es una aportación de A. Cedano

    $('#Unidades').on('change', function(e) {
                var optionSelected = $("option:selected", this);
                var valueSelected = this.value;
                var selectStatus = (valueSelected === 0) ? true : false;
                console.log(selectStatus);
                $('#transferirBienSinProcesar').prop('disabled', selectStatus);
              });

pero no se por donde empezar para validar al mismo tiempo 5 selects, ya tengo el código escrito pero no se como enlazar, estaba pensando en un if... de momento. Esta es una vista del modal donde se encuentran alojados los Combobox Select introducir la descripción de la imagen aquí

El select UNIDAD PLANTEL ya trae cargada la lista de las unidades, pero hasta que seleccionas una, muestra en el segundo select al personal adscrito a estas unidades. El resto es código en el HTML . Por cierto el boton ya esta deshabilitado.

Saludos

2
  • No queda claro lo que quieres hacer. Pulsa en editar para explicar brevemente lo que quieres y además agrega el HTML donde están los select
    – A. Cedano
    Commented el 8 jul. 2020 a las 9:54
  • A. Cedano ya edite mi pregunta haber si queda un poco mas claro
    – Cesarin
    Commented el 8 jul. 2020 a las 16:23

2 respuestas 2

1

El procedimiento es muy sencillo, lo explico paso a paso:

  1. Otorgas a cada select que quieres controlar la misma clase
  2. Escuchas los eventos change de cada elemento select de esa clase. Ten en cuenta que en jQuery los selectores de clase se indican por .clase. Aquí yo he puesto un selector bastante específico usando la notación: select.Unidades, para que escuche únicamente los cambios de los elementos de tipo select. Si hubiera por ejemplo un botón u otro elemento con la clase Unidades no será escuchado en ese bloque. Si por el contrario quieres que todos los elementos sean escuchados, pones el selector únicamente con .Unidades
  3. Para determinar si todos los select tienen una opción distinta a aquella por defecto, la lógica que he seguido aquí ha sido la siguiente: en cada select habrá una opción con value 0 por defecto. Cada vez que haya un cambio se va determinar el estado de todos los select mediante esto: $(".Unidades option:selected[value='0']").length > 0 lo que se verifica ahí es si alguno de los option seleccionados tiene un value="0", de ser así, la propiedad disabled del botón deberá permanecer, en caso contrario, el botón se habilitará.

Eso es todo, no hay mayor misterio. Ahora queda probar el código. Puedes seleccionar cualquier país y ciudad y verás que el botón se activa, luego volver a la opción por defecto en cada select y verás que el botón se desactiva.

 
$('select.Unidades').on('change', function(e) {
  var disableStatus = $(".Unidades option:selected[value='0']").length > 0;
  $('#transferirBienSinProcesar').prop('disabled', disableStatus);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="selPais" class="Unidades">
  <option value="0" selected>-Seleccione País-</option>
  <option value="1">País 1</option>
  <option value="2">País 2</option>
  <option value="3">País 3</option>
</select>
<hr />
<select id="selCiudad" class="Unidades">
  <option value="0" selected>-Seleccione Ciudad-</option>
  <option value="1">Ciudad 1</option>
  <option value="2">Ciudad 2</option>
  <option value="3">Ciudad 3</option>
</select> <br />
<button id="transferirBienSinProcesar" disabled>Enviar</button>

2
  • Excelente aportación déjame probar y te comento.
    – Cesarin
    Commented el 8 jul. 2020 a las 18:08
  • Gracias por la ayuda, lamentablemente no funciona, la única manera en que el botón se habilita es utilizando el código donde expreso que es una aportación de @A. Cedano ya lo intente de varias maneras y no da resultado. Solo cuando se encuentra la linea indicada de esta manera $('#Unidades').on('change', function(e) { contenido de la funcion} se habilita el boton y permite procesar el resto, Muchas Gracias por sus aportaciones.
    – Cesarin
    Commented el 8 jul. 2020 a las 20:22
1

Para que la validación tome todos los combos que tengas, debes usar usar una clase en lugar de un ID (único por cada campo)

$('#Unidades').on('change', function(e) {
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;
        var selectStatus = (valueSelected === 0) ? true : false;
        console.log(selectStatus);
        $('#transferirBienSinProcesar').prop('disabled', selectStatus);
      });

Reemplaza por

$(document).on('change','.nombre_mi_clase', function(e) {
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;
        var selectStatus = (valueSelected === 0) ? true : false;
        console.log(selectStatus);
        $('#transferirBienSinProcesar').prop('disabled', selectStatus);
      });

Y cada uno de tus combos:

<select class="form-control form-control-sm" style="font-size:10px;" style="width:100px;"  id="Unidades" name="Unidades" required class="required nombre_mi_clase">
                    <option style="font-size:10px;" style="width:100px;" value="0"  selected="selected">Seleccione la Unidad:</option>
                    <?php include './inc/combos_transferencia/cargarBoxUnidades.php';?>
                    </select> 

Esto hará que la validación afecte a cada uno de los combos que posean la clase que estás asignandole al script.

Recuerda que debes setear en el ready que el campo debe estar deshabilitado para que recorra todos

5
  • ok lo reviso y te comento que tal me funciona, ya había leído algo al respecto pero no me cayo el "20" de como realizarlo !! Gracias!!!
    – Cesarin
    Commented el 8 jul. 2020 a las 17:16
  • Agradezco tu aportacion infinitamente al igual que con @A. Cedano pero no funciona como me indican, la única manera en que se ve alguna acción en el botón que procesa la petición es cuando la linea se encuentra de esta manera $('#Unidades').on('change', function(e) { codigo que valida} por eso preguntaba si habia manera de poner 4 funciones con su respectivo ID y al final si todos pasaban, dejara activo el boton para procesar la solicitud.
    – Cesarin
    Commented el 8 jul. 2020 a las 20:26
  • Los modales se cargan dinámicamente? Es decir, el contenido del lo carga al recargar la página o es invocado desde Ajax? Commented el 9 jul. 2020 a las 0:19
  • Se carga el modal desde un botón ubicado en un dataTable, desde ese botón se invoca una petición ajax para cargar el primer select dentro del modal el cual corresponde a Unidades, ya que tienes la lista del select cargada, y se selecciona algún elemento de esta, se hace otra petición ajax y trae los valores del segundo select que se denomina Personal (lista de personas que pertenecen específicamente a una área de trabajo. los otros combobox estan alojados en el mismo html del modal solo tienen entre dos o maximo cuantro elementos en la lista son para indicar estatus de los activos.
    – Cesarin
    Commented el 9 jul. 2020 a las 1:25
  • Ya sé cuál es tu problema. Edito mi respuesta Commented el 9 jul. 2020 a las 9:28

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.