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.
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);
});