jQuery Ajax sending data to php with one button click but two different actions

Question

What I'm trying to achieve is a user to follow another user without having to refresh the page. So far I've played around and had no problem inserting and deleting the rows in mysql table, but now when I'm trying with AJAX I can't get it to work.

jquery

$(document).ready(function(){
$("#followbutton").click(function(e) {
e.preventDefault();
var theuserid = $('#theuserid').val();
var thefollower = $('#thefollower').val();

$.ajax({
url: 'includes/followuser.inc.php',
type: 'post',
data: {'theuserid': theuserid, 'thefollower': thefollower, 'submitFollow': true},
success: function(response){
$('#followmessage').html(response);   
$("#followmessage").show().delay(3000).fadeOut();
$('#followbutton').hide();
$('#unfollowbutton').show();

// $("#unfollowbutton").hover(function(){
// $(this).text("Unfollow");
// }, function(){
// $(this).text("Unfollow");
// });
    
}
});
});
});

$(document).ready(function(){
$("#unfollowbutton").click(function(e) {
e.preventDefault();
var theuserid = $('#theuserid').val();
var thefollower = $('#thefollower').val();

$.ajax({
url: 'includes/followuser.inc.php',
type: 'post',
data: {'theuserid': theuserid, 'thefollower': thefollower, 'submitUnfollow': true},
success: function(response){
$('#followmessage').html(response);   
$("#followmessage").show().delay(3000).fadeOut();
$('#unfollowbutton').hide();
$('#followbutton').show();

//I want the button to change its text to Following and when hovering it should say unfollow if user is followed

}
});
});
});

followuser.inc.php

<?php
require_once 'dbh.inc.php';
require_once 'functions.inc.php';
if (isset($_POST["submitFollow"])){
$userthatisfollowed = $_POST["thefollower"];
$theuserid = $_POST["theuserid"];

mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$stmt = $conn->prepare('INSERT INTO userfollow (thefollower, theuserid, followstatus) VALUES (?,?,?)');
$followstatus = 1;
$stmt->bind_param('sss', $userthatisfollowed, $theuserid, $followstatus);
$stmt->execute();
echo $response = "<span>Followed!</span>";
$stmt->close();

} else if(isset($_POST["submitUnfollow"])){
$userthatisfollowed = $_POST["thefollower"];
$theuserid = $_POST["theuserid"];
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$stmt = $conn->prepare('DELETE userfollow FROM userfollow WHERE thefollower = ? AND theuserid = ?');

$stmt->bind_param('ss', $userthatisfollowed, $theuserid);
$stmt->execute();
echo $response = "<span>Unfollowed!</span>";
$stmt->close();
} else {
    echo "DID NOT WORK";
}

profile.php

if(isset($_SESSION["userid"]) && $_SESSION["userid"] != $userthatisfollowed) {
?>
<form action="<?php echo htmlspecialchars("includes/followuser.inc.php");?>" id="followform" method="post">
<?php

if ($resulted->num_rows > 0){
$subscribe_status = "Unfollow";
$subscribe_text = "Following";

} else {
$subscribe_status = "Follow";
$subscribe_text = "Follow";
}


echo "<button name='submit".$subscribe_status."' id ='unfollowbutton' type='submit' style='display:none'>";
echo "<span>".$subscribe_text."</span>";
echo "</button>";

echo "<button name='submit".$subscribe_status."' id ='followbutton' type='submit'>";
echo "<span>".$subscribe_text."</span>";
echo "</button>";


// echo "<button name='submit".$subscribe_status."' id ='notificationbell' type='submit' style='display:none'>";
// echo "<i class='fa fa-bell'></i>";
// echo "</button>";

echo "<div id='followmessage'></div>";
?>
<input type="hidden" name="theuserid" id="theuserid" value="<?php echo $_SESSION["userid"] ?>">
<input type="hidden" name="thefollower" id="thefollower" value="<?php echo $userthatisfollowed; ?>">
</form>
<?php
}

What's worth noting is that I'm getting the response DID NOT WORK which tells me that if(isset($_POST["submitUnfollow"])) is not set. However, If I try with if(isset($_POST["theuserid"]) && (isset($_POST["thefollower"])) then it actually works for the insert query but not for the delete query.

You're not sending submitFollow in the data: argument, so if (isset($_POST['submitFollow'])) won't succeed. — Barmar
– Barmar, Commented Dec 16, 2022 at 3:30
@Barmar How would I do it considering that there is a clickevent on that exact button? you mean like this var thebutton = $('#followbutton').val(); and have that in the data:argument as well? — Votum
– Votum, Commented Dec 16, 2022 at 3:34

Barmar · Accepted Answer · 2022-12-16 03:34:46Z

1

You're missing the submitFollow parameter in the data: object. Instead, you have followbutton: true, which isn't used by the PHP code. So change that to:

data: {'theuserid': theuserid, 'thefollower': thefollower, 'submitFolow': 'true'},

And for the unfollow button, use submitUnfollow instead.

answered Dec 16, 2022 at 3:34

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Votum Over a year ago

thank you, did not know you could do it that way.

Votum Over a year ago

It is currently working, however I still need to refresh the page in order for the button texts to change. If the user Follows another user, the button/click event should be changed to Unfollow. This only happens whenever I refresh the page

Barmar Over a year ago

Create both a follow button and unfollow button. When the user clicks on button, hide that button and show the other. I don't see any way for the user to choose who they're following, since you have that in a hidden input, it's not something they select.

Votum Over a year ago

and both of the buttons should be outside of the if statement that is checking the subscribe status? @Barmar

Barmar Over a year ago

Yes, they're just in the static HTML.

|

Collectives™ on Stack Overflow

jQuery Ajax sending data to php with one button click but two different actions

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related