0

Estimados estaría agradecido de su ayuda, estoy armando unos input select dinámicos con consultas a una base de datos mediante AJAX y PHP, los 4 select están anidados hacia la derecha, cada uno va mostrando opciones en función del otro.

Como ultimo tengo un botón que solo se habilita cuando los 4 input tienen una opción seleccionada, cuando selecciono una opción por primera vez el botón se habilita correctamente, cuando cambio la opción en el primer input los demás input quedan de forma correcta sin ninguna opción como debe ser, pero el botón sigue habilitado, debo volver a seleccionar una opción y ahí si se deshabilita, que puede estar faltándole a mi código que sigue dando ese problema

Adjunto el código PHP

<?php
include dirname(__FILE__).'/../../../logica/conexion/conexion.php';
class MostrarRepros {
    public function Mostrar(){
        $con = new Conexion(DB_ADMIN); 
        $HTML = '';
        unset($marca,$modelo,$generacion,$motor);
        $marca = filter_var(filter_input(INPUT_POST,'marca'),FILTER_SANITIZE_STRING);
        $modelo = filter_var(filter_input(INPUT_POST,'modelo'),FILTER_SANITIZE_STRING);
        $generacion = filter_var(filter_input(INPUT_POST,'generacion'),FILTER_SANITIZE_STRING);
        $motor = filter_var(filter_input(INPUT_POST,'motor'),FILTER_SANITIZE_STRING);
        $HTML .= '      <div class="col-2">
                            <select name="marca" id="marca" class="form-control custom-select">
                                <option value="">ELIGA SU MARCA</option>';
        $marcas = $con->obtenerdatos("marca","estadisticas_repro","1 ORDER BY marca ASC",[1]);
            for($m = 0;$m < count($marcas);$m++){
                $fila = $marcas[$m];
                if($marca == $fila['marca']){
                    $HTML .= '  <option value="'.$fila['marca'].'" selected>'.$fila['marca'].'</option>';
                }else{
                    $HTML .= '  <option value="'.$fila['marca'].'">'.$fila['marca'].'</option>';
                }
            }
        $HTML .= '          </select>
                        </div>
                        <div class="col-2">
                            <select name="modelo" id="modelo" class="form-control custom-select">
                                <option value="">ELIGA SU MODELO</option>';
        $modelos = $con->obtenerdatos("modelo","estadisticas_repro","marca = ?",[$marca]);
            if(count($modelos) > 0){
                for($m = 0;$m < count($modelos);$m++){
                    $fila = $modelos[$m];
                    if($modelo == $fila['modelo']){
                        $HTML .= '  <option value="'.$fila['modelo'].'" selected>'.$fila['modelo'].'</option>';
                    }else{
                        $HTML .= '  <option value="'.$fila['modelo'].'">'.$fila['modelo'].'</option>';
                    }
                }
            }
        $HTML .= '          </select>
                        </div>
                        <div class="col-2">
                            <select name="generacion" id="generacion" class="form-control custom-select">
                                <option value="">ELIGA SU GENERACIÓN</option>';
        $generaciones = $con->obtenerdatos("generacion","estadisticas_repro","marca = ? and modelo = ?",[$marca,$modelo]);
        if(count($generaciones) > 0){
            for($g = 0;$g < count($generaciones);$g++){
                $fila = $generaciones[$g];
                if($generacion == $fila['generacion']){
                    $HTML .= '  <option value="'.$fila['generacion'].'" selected>'.$fila['generacion'].'</option>';
                }else{
                    $HTML .= '  <option value="'.$fila['generacion'].'">'.$fila['generacion'].'</option>';
                }
            }
        }
        $HTML .= '          </select>
                        </div>
                        <div class="col-2">
                            <select name="motor" id="motor" class="form-control custom-select">
                                <option value="">ELIGA SU MOTOR</option>';
        $motores = $con->obtenerdatos("motor","estadisticas_repro","marca = ? and modelo = ? and generacion = ?",[$marca,$modelo,$generacion]);
        if(count($motores) > 0){
            for($m = 0;$m < count($motores);$m++){
                $fila = $motores[$m];
                if($motor == $fila['motor']){
                    $HTML .= '  <option value="'.$fila['motor'].'" selected>'.$fila['motor'].'</option>';
                }else{
                    $HTML .= '  <option value="'.$fila['motor'].'">'.$fila['motor'].'</option>';
                }
            }
        }
        $HTML .= '      </select>
                    </div>
                    <div class="col-2">';
        if(!(empty($marca)) and !(empty($modelo)) and !(empty($generacion)) and !(empty($motor))){
            $HTML .= '  <button type="button" class="btn btn-danger w-100" id="simular">SIMULAR REPRO</button>
                        <input type="hidden" name="" id="" value="">';
        }else{
            $HTML .= '  <button type="button" class="btn btn-danger w-100" disabled>SIMULAR REPRO</button>';
        }
        $HTML .= '  </div>';
        
        return $HTML;
    }           
}
$banners = new MostrarRepros();
if(isset($_POST["action"])){
    $html1 = $banners->Mostrar();    
    $data = array(
        "html1" => $html1
    );
    echo json_encode($data);    
}
?> 

PETICION AJAX

$(document).ready(function(){
        mostrar_opciones();

        $(document).on('change','#marca',function(){
            mostrar_opciones();
        })
        $(document).on('change','#modelo',function(){
            mostrar_opciones();
        })
        $(document).on('change','#generacion',function(){
            mostrar_opciones();
        })
        $(document).on('change','#motor',function(){
            mostrar_opciones();
        })
        $(document).on('change','#simular',function(){
            mostrar_opciones();
        })
    });

    function mostrar_opciones(){
        var action = 'fetch_data';
        var marca = obtener_select(document.getElementById('marca'));       
        var modelo = obtener_select(document.getElementById('modelo'));     
        var generacion = obtener_select(document.getElementById('generacion'));     
        var motor = obtener_select(document.getElementById('motor'));       
        $.ajax({  
            url:"<?php echo $raiz;?>logica/web/acciones/mostrar_repros.php",
            method: "POST",
            dataType: "json",
            data:{ 
                action:action,
                marca:marca,
                modelo:modelo,
                generacion:generacion,
                motor:motor
            },      
            success:function(data){
                $('.prueba').html(data.html1);   
            }
        }); 
    } 

    function obtener_select(elemento){
        var valor;
        if (elemento != null) {
            valor = elemento.value;
        }else {
            valor = null;
        }   
        return valor;
    }

1 respuesta 1

0

Posible camino para encontrar el problema

Te recomiendo chequear una por una las variables de esta condición...

if(!(empty($marca)) and !(empty($modelo)) and !(empty($generacion)) and !(empty($motor))){

...para ver porqué se muestra un botón en vez del otro. Puedes hacerlo por ejemplo imprimiendo el contenido de las cuatro antes de la condición, y así ir acorralando el problema. Puedes probar usar isset() en vez de empty(), y recuerda que en vez de and puedes poner simplemente &&.

Sugerencia general

Como sugerencia general, te recomendaría separar mucho más lo que es programático y base de datos (PHP/MySQL) de lo que es HTML y Javascript. Hay varias formas de encararlo y dependerá mucho de la situación específica, pero por ejemplo, puedes tener todos los select vacíos (sin ninguna option) en HTML, llenarlos vía AJAX, y controlar el estado del botón chequeando que todos los select tengan elementos.

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.