Sending Variable Data as Post Using Ajax

Question

I have been looking into a problem, but I can't figure out how to solve it or what the solution is. I am working on my website using infinityfree as a free user. I am creating a simple review page where the user can type and then rate it with stars. The reviews get submitted to my database, and the text is correct, but the number of stars doesn't get added to ($_POST["ratedIndex"]).

When I have tried to echo the variable ratedIndex it is empty. It seems that it doesn't send through Ajax as intended, and I can't figure out why. The alert doesn't trigger, but the clicks on the stars register on the network panel in the chrome inspect element. Hopefully, I haven't been a complete dumbass and missed something essential as I am new to creating websites, and any help is very apprenticed.

gameInfo.php:

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST"){
        require_once 'DBConnect.php';

        $game;
        $user;
        $review;
        $userid;
        $ratedIndex;
    
        $stmt = $conn->prepare("INSERT INTO reviews(game, user, userid, review, indexStar) VALUES (?,?,?,?,?)");
        $stmt->bind_param("sssss",$game, $user, $userid, $review, $ratedIndex);
        $userid = $_SESSION["userid"];
        $game = $gameTitle;
        $user = $_SESSION["username"];
        $review = $_POST["uploadReview"];
        $ratedIndex = ($_POST["ratedIndex"]);

        $stmt->execute();
    }
?>

<?php
        $id = $_SESSION["userid"];
        $gamename = $gameTitle;
        $rowzero ="0";
        $sql_ifreviewexist ="SELECT * FROM reviews WHERE reviews.game=?";
        $exist = $conn->prepare($sql_ifreviewexist);
        $exist->bind_param('s', $gamename);
        $exist->execute();
        $res = $exist->get_result();
        $reviewexist_row = mysqli_num_rows($res);
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
         echo ' <div id="noreviewsExists">
                <div class="instructions"><p>Write a review for '.$gamename.'</p></div>
                <form id="reviewForm" method="POST" action="">
                <textarea type="text" id="reviewTextarea" name="uploadReview"></textarea>
                <div class="reviewStars">
                <i class="fa fa-star" data-index="0"></i> 
                <i class="fa fa-star" data-index="1"></i> 
                <i class="fa fa-star" data-index="2"></i> 
                <i class="fa fa-star" data-index="3"></i> 
                <i class="fa fa-star" data-index="4"></i> 
                </div>
                <div id="submitReview">
                    <button id="submitButton" type="submit" form="reviewForm">Submit</button>
                </div>
            </form>
            </div>';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var ratedIndex = -1;
    $(document).ready(function () {
        resetStarColors();

        $('.fa-star').on('click', function (){
            ratedIndex = parseInt($(this).data('index'));
            $.ajax({
                url: "gameInfo.php",
                method: "POST",
                dataType: 'json',
                data: {
                    ratedIndex: ratedIndex
                }, success: function (data){
                    alert("ok");
                }

            });
        });

        $('.fa-star').mouseover(function () {
            resetStarColors();

            var currentIndex = parseInt($(this).data('index'));
            setStars(currentIndex);
        });

        $('.fa-star').mouseleave(function () {
            resetStarColors();

            if(ratedIndex != -1)
                setStars(ratedIndex);
        });

    });
    
    function setStars(max) {
        for (var i=0; i <=max; i++)
                $('.fa-star:eq('+i+')').css('color', 'yellow');
    }

    function resetStarColors() {
        $('.fa-star').css('color', 'black');
    }

</script> 

Edit:

After some insight from ADyson I have done something like this:

 $test = $_POST["ratedIndex"];
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
echo '<div>'.$test.'</div>';
...}

when I click on the stars, it comes up in the network panel under preview

So now I am even more puzzled as to why it doesn't work when I try to insert it into the table.

Answer 1

I know this isn't the right answer for the question, but it is an alternative and maybe you will find it somewhat helpful. The solution I came up with was to take the value given by your jquery and set it to an invisible input value inside the sumbit form.

<form id="reviewForm" method="POST" action="">
                <textarea type="text" id="reviewTextarea"name="uploadReview</textarea>
                <div id="submitReview">
                <input type="hidden" id="jqValue" name="jqueryValue" value=""/>
                    <button id="submitButton" type="submit" form="reviewForm">Submit</button>
                </div>

Then take the variable ratedIndex and give it to your inputjqValuevalue like this

$('.fa-star').on('click', function (){
            ratedIndex = parseInt($(this).data('index'));
            $("#jqValue").val(ratedIndex);
        });

Lastly call in your php $ratedIndex=$_POST["jqueryValue"];

Like I said this just an alternate way to solve your problem if you are stuck and cant make ajax work you can use this. I posted because you might have not thought about doing it this way.