How to change a value in onclick function button - php

Question

i will like to change the status of a user in my database from inactive to active by clicking on a button.
i have a function already which show if the use is active or inactive on the database by asigning a value to them eg 0 for inactive and 1 for active.
below is the function that change the value on the button if the user is inactive or active
if ( $row["active"] == 1 ) {
echo '<button class="btn-u btn-u-green" type="button">Active</button>';
} else {
echo '<button class="btn-u btn-u-red" type="button">Inactive</button>';
}
now i need to create a function that handle the active and inactive button. like when an admin clicks on inactive (Button) it update the value into the database to 1 (Active), and if the admin click on the active button again it update the value to 0 (inactive),
below is what i have done so far
Button Table bellow
<td>
<?php
if ( $row["active"] == 1 ) {
echo '<button onclick="button" name="active" class="btn-u btn-green" type="button">Active</button>';
} else {
echo '<button name="inactive" class="btn-u btn-u-red" type="button">Inactive</button>';
}
?></td>
database settings
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$databasename = "testone";
try
{
$conn = new PDO ("mysql:host=$hostname;dbname=$databasename",$username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST["active"]))
}
$query = "INSERT INTO users(active) VALUE (:1)";
$statement = $conn->prepare($query);
$statement->execute(
array(
'users' => $_POST['active']
)
);
$count = $statement->rowCount();
if($count > 0)
{
echo "data insert successfully";
}
else
{
echo "data insertion failed";
}
}
}
catch(PODExeption $error)
{
echo $error->GetMessage();
}
?>
function i used
<script
src="https://code.jquery.com/jquery-3.4.1.js"integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous">
</script>
<script>
$(document).raedy(function(){
$('button[type="button"]').click(function(){
var active = $(this).val();
$.ajax({
url:"activateagent.php",
method:"POST",
data:{users:active},
success: function(data){
$('$result').html(data);
}
});
});
});
</script>
in my console i get this error ReferenceError: button is not defined
Thanks

Answer 1

There are so many errors in the code, make following changes:
<td>
<?php
if ( $row["active"] == 1 ) {
echo '<button class="btn-u btn-green btn_send" id="<?php echo $row["active"];?>">Active</button>';
} else {
echo '<button class="btn-u btn-u-red btn_send" id="<?php echo $row["active"];?>">Inactive</button>';
}
?></td>
Now in JQuery code make these changes:
$(document).ready(function(){
$('.btn_send').on('click',function(){
var active = $(this).attr('id');
$.ajax({
url:"activateagent.php",
method:"POST",
data:{users:active},
success: function(data){
$('$result').html(data);
}
});
});
});