Botão de status

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

 }

?>

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?

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?