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.

@MainulHasan that's exactly what they're trying to do. It sends the rating value to the server — ADyson
– ADyson, Commented Oct 31, 2021 at 6:18
the number of stars doesn't register....what exactly do you mean by this? Are you saying it's doesn't insert a row into the database when the Ajax runs? — ADyson
– ADyson, Commented Oct 31, 2021 at 6:19
P.s. you have a variable called $gameTitle which you are using, but whose value does not seem to be defined anywhere in your code — ADyson
– ADyson, Commented Oct 31, 2021 at 6:25
@ADyson I have tried to see with echowhy when I submit that the star counts is not there, I get that $_POST["ratedIndex"]) is empty. The $gameTitle comes from my other page select statement and it is not a problem as of now $gameTitle = "counterstrike"; — Darke
– Darke, Commented Oct 31, 2021 at 6:35
Where exactly are you looking for the echoed value? Bear in mind with an Ajax request it will not show on the screen automatically...you would need to look in the browser Network tool at the Response to that Ajax request — ADyson
– ADyson, Commented Oct 31, 2021 at 6:41

zellez11 · Accepted Answer · 2021-10-31 16:48:05Z

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.

Collectives™ on Stack Overflow

Sending Variable Data as Post Using Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related