1

Hola, buen dia si alguien pudiera ayudarme o sugerir otro metodo puedo hacer esta funcionalidad.

Este es el resultado que deseo que según la opción seleccionada se mantenga el color aun si recargo la pagina, y esto para cada uno de los botones que se ven en la imagen.

introducir la descripción de la imagen aquí

En este punto solo le hice función a 2 botones, activar y desactivar al recargarse se cambia el estado en la base de datos pero en la parte visual no se mantiene el botón seleccionado.

 <form id="Cambiar_estados_boton">
                <div class="bd-example">
                 <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
                  <input type="radio" class="btn-check" name="radio1" id="vbtn-radio1" value="Activo" onclick="estadoActivo();" >
                    <label class="btn btn-outline-danger" for="vbtn-radio1">ACTIVAR</label>
                    <input type="radio" class="btn-check" name="radio2" id="vbtn-radio2" value="Inactivo" onclick="estadoInactivo(); location.reload();"  checked>
                    <label class="btn btn-outline-danger" for="vbtn-radio2">DESACTIVAR</label>
                    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
                    <label class="btn btn-outline-danger" for="vbtn-radio3">BAÑO</label>
                    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio4" autocomplete="off">
                    <label class="btn btn-outline-danger" for="vbtn-radio4">BREAK</label>
                     </div>
                    </div>
</form>


Esta es la función que enruta al archivo donde se encuentra la condicion y el sql para cambiar el estado en la base.

<script>
                    function estadoInactivo(){

                    var switche = 'INACTIVO'
                    console.log('SE EJECUTA LA FUNCION "INACTIVO"');
                    $.ajax({
                        type: 'POST',
                        url: 'cambiar_estado_inactivo.php',
                        data: {
                            'switche': switche
                        },
                    })
                    
                    }

                </script>


En este php esta el SQL de la funcion anterior

<?php

    session_start();
    require('Conexionn.php');
    require('css/styles.css');
    date_default_timezone_set('America/Bogota');
    $fechaHoy = date('d/m/Y');
    $horaHoy = date('H:i:s');


    $asesor= $_SESSION['UsuarioIngreso'];
    $Estado = $_POST['switche'];
    $Count;

    if($Estado=='INACTIVO'){

        $params=array();
        $options=array("Scrollable"=>SQLSRV_CURSOR_KEYSET);
        $sql = sqlsrv_query($conn, "EXEC SPR_SELEC_RCONEXION '".$asesor."' , '".$fechaHoy."' ",$params,$options);

        $stmt=sqlsrv_fetch_array($sql);

        
        if ($stmt['CON_CESTADO']=='Activo') {
            sqlsrv_query($conn,"EXEC SPR_UPDATE_ACTIVO_ASESOR_BOTON '".$fechaHoy."' , '".$horaHoy."' , 'Inactivo' , '".$asesor."' ");
            
            

        }else{
            sqlsrv_query($conn,"EXEC SPR_UPDATE_ACTIVO_ASESOR_BOTON '".$fechaHoy."' , '".$horaHoy."' , 'Activo' , '".$asesor."' ");

            
            
        }

        
    

    }

    
?>

Este script llama un JS que es el siguiente.

<script src="estados_boton.js" ></script>

El cual se le pasa el id del form donde se encuentran los input donde se indica que según el valor que seleccione se debe mantener seleccionado el botón aun que se recargue la pagina.

const selectsArray = document.querySelectorAll('#Cambiar_estados_boton select');


function HabilitaParteForm(){

    document.getElementById('vbtn-radio1').checked=false;
    document.getElementById('vbtn-radio2').checked=true;
   


}

function HabilitaParteForm2(){

    document.getElementById('vbtn-radio1').checked=true;
    document.getElementById('vbtn-radio2').checked=false;


}





const ValidaSelects = (e) => {
    switch (e.target.name){

        case "vbtn-radio1":
            if(e.target.value ==="Activo"){
                HabilitaParteForm2();
            }

        break;
        
        case "vbtn-radio2":
            if(e.target.value ==="Inactivo"){
                HabilitaParteForm();
            }

        break;
               
    }
}

selectsArray.forEach((select) => {
    select.addEventListener('keyup', ValidaSelects);
    select.addEventListener('click', ValidaSelects);
});
2
  • Si quieres tener algún tipo de permanencia en tu página te recomiendo que investiges sobre localStorage
    – FranAcuna
    Commented el 29 oct. 2021 a las 20:40
  • Si tienes una base de datos, necesitas obtener ese activo(true) ó ese inactivo(false) desde la base, y en el html imprimes el valor de la base de datos, que en este caso seria el estado inactivo ó activo, si recargas la pagina no se actualizaría porque el valor esta en la base de datos, solo se actualizaría si presionas el botón, puedes investigar sobre como cambiar un estatus de un boton con php
    – Jonathan G
    Commented el 29 oct. 2021 a las 23:38

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.