Botão de status

[alysson122010 2]

Gostaria de saber como fazer um botão de status. Tipo ta la ativo ai quando eu clicar nesse botão ele mude e fique desativado e se eu clicar novamente fique ativado.

Sem da refresh na pagina e esse botao envie para meu banco de dados e altere o status na tabela com o id do post.

Como eu faço isso nao tenho ideia.

[luannsr12 17]

 

 

1- Temos um botão escrito Ativar, com id "btn" , e uma input com o status, sendo 0=Inativo e 1=Ativo:

<button id="btn" >Ativar</button>
<input id="status" type="hidden" value="0" />

2- Usando Jquery, iremos mudar o texto do botão e enviar um post para algum arquivo php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

   $("#btn").on('click',function(){
   
     var v = $("#status").val();
     
     if(v == 1){
       // está atualmetne ativo, vamos desativar
       $("#status").val(0);      // seta status para 0
       $("#btn").text('Ativar'); // Mudamos o texto do botão
     }else if(v == 0){
       // está desativado, vamos ativar
       $("#status").val(1);      // seta status para 1
       $("#btn").text('Desativar'); // Mudamos o texto do botão
     }
     
     // vamos enviar um post para um arquivo php
     
     $.post('dir/arquivo.php',{status:v},function(data){
     	console.log(data);
     });
   
   });
  
</script>

No arquivo php, basta receber o status e mudar no banco de dados:

<?php 

 if(isset($_POST['status'])){
   
  $status = trim($_POST['status']); 
   
  // mudar status no banco de dados
     
 }

?>

 

[alysson122010 2]

Gostei da sua ideia deu para eu entender bem. Porem o codigo aqui nao funfo eu clico no botao nada acontece. 

Oque sera que estou fazendo de errado?

[alysson122010 2]

Eu conseguir fazer. Pesquisei muito:

 

Index.php

 

<?php include('config.php');?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<?php
        $list = mysqli_query($conn, "SELECT * FROM botao");
            while($row = mysqli_fetch_assoc($list)){
?>

<form id="form<?php echo $row['id'];?>" name="form<?php echo $row['id'];?>" method="post" action="">
 
<?php echo $row['nome'];?> - 
<input name="id" type="hidden" id="id" value="<?php echo $row['id'];?>"/>
<input type="submit" id="button<?php echo $row['id'];?>" value="<?php echo $row['status'];?>" />
</form>
<script>
/*Botao*/

/*Enviar dados*/
$(document).ready(function(){
      $("#button<?php echo $row['id'];?>").click(function(e){
jQuery(document).ready(function(){
if(document.getElementById("button<?php echo $row['id'];?>").value == "Ativo"){
  document.getElementById("button<?php echo $row['id'];?>").value = "Inativo";

 }else{
  document.getElementById("button<?php echo $row['id'];?>").value = "Ativo";
 }
   });
    });
        jQuery('#form<?php echo $row['id'];?>').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "processa.php",
                data: dados,
                success: function( data )
                {
                    
                }
            });
            
            return false;
        });
    });
</script>
<?php }?>

 

 

processa.php

 

<?php 
include('config.php');
$id = $_POST['id'];
$list = mysqli_query($conn, "SELECT * FROM botao WHERE id = '$id'");
            while($row = mysqli_fetch_assoc($list)){
            if($row['status']=='Ativo'){
    $update = mysqli_query($conn, "UPDATE botao SET status = 'Inativo' WHERE id = '$id'");
    }else{
    $update = mysqli_query($conn, "UPDATE botao SET status = 'Ativo' WHERE id = '$id'");
        }
    }
?>
 

Config.php

 

<?php
error_reporting(0);
ini_set("display_errors", 0 );
$servidor = "localhost";
$usuario = "root";
$senha = "";
$dbname = "teste";

//Criar a conexao
$conn = mysqli_connect($servidor, $usuario, $senha, $dbname);
?>

 

Tabela sql

 

-- Estrutura da tabela `botao`
--

CREATE TABLE `botao` (
  `id` int(11) NOT NULL,
  `nome` text NOT NULL,
  `status` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Extraindo dados da tabela `botao`
--

INSERT INTO `botao` (`id`, `nome`, `status`) VALUES
(1, 'Jose', 'Ativo'),
(2, 'Lucas', 'Ativo');

 

 

Agora eu gostaria de saber como posso fazer para o botao ficar verde quando tiver ativado e vermelho quando tiver inativo?