'JQuery Ajax not passing variables to PHP

I want to pass some variables about a specific chat in order to pull all the chat messages from the database using JQuery and Ajax. I have a list with hidden inputs for each conversation/chat like so:

<ul class="userlist">
    <li class="thisuser">
        <div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
        <div class="thischatdets">
            <p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
            <b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
            <p class="thischatmsg">This is the last msg in the chat buddy</p>
        </div>
        <input type="text" class="abtitem" value="has-itemid" />
        <input type="text" class="abtbuyer" value="has-userid" />
        <input type="text" class="abtseller" value="has-userid" />
    </li>
    <li class="thisuser">
        <div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
        <div class="thischatdets">
            <p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
            <b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
            <p class="thischatmsg">This is the last msg in the chat buddy</p>
        </div>
        <input type="text" class="abtitem" value="has-itemid" />
        <input type="text" class="abtbuyer" value="has-userid" />
        <input type="text" class="abtseller" value="has-userid" />
    </li>
    <li class="thisuser">
        <div class="thisuserimg"><img src="images/userpics/user1.png" alt=""/></div>
        <div class="thischatdets">
            <p class="thischatuser"><span>This is my username buddy</span><span>Mar 09</span></p>
            <b class="thischatad"><span>Closed</span>This is my ad title buddy</b>
            <p class="thischatmsg">This is the last msg in the chat buddy</p>
        </div>
        <input type="text" class="abtitem" value="has-itemid" />
        <input type="text" class="abtbuyer" value="has-userid" />
        <input type="text" class="abtseller" value="has-userid" />
    </li>
<ul>

I have a couple of ajax requests on this page like so:

    $(document).ready(function(){
        //Send Message
        $("#newmsg").submit(function(e){
            $.ajax({
                type: "POST",
                url: "server/server.php",
                data: $("#newmsg").serialize(),
                success:function(data){
                    console.log(data);
                }
            });
            e.preventDefault();
        });
        
        //Autoreferesh Userlist
        setInterval(function() { // this will execute the function every 1s
            let url = "server/test.php";
            $.get(url, function(d) { // jquery function that 'does' the GET request
                $('.userlist').html(d) // when we have a returned request, populate the element above with the body of the returned request ( plain text )
            });
        }, 3000);
        
        //Load chat messages
        $("ul.userlist").on("click","li", function(){
            //alert("Chat content loaded successfully!");
            //alert($(this).find(".thischatuser span").text());
            var abtitem=$(this).find(".abtitem").val();
            var abtbuyer=$(this).find(".abtbuyer").val();
            var abtseller=$(this).find(".abtseller").val();
            event.preventDefault();
            $.ajax({
                url:"server/test.php",
                method:"POST",
                data:{abtitem:abtitem, abtbuyer:abtbuyer, abtseller:abtseller},
                cache:false,
                success:function(data){
                    let url = "server/test.php";
                    $.get(url, function(data) { // jquery function that 'does' the GET request
                        $('.chatarea').html(data) // when we have a returned request, populate the element above with the body of the returned request ( plain text )
                    });
                }
            });
        });
    });

Now, the "Load chat messages" code is responsible for the post and display of the data I need, and it seems to be working because I'm receiving a response from the server. However, the server response shows that the post variables are not sent. Note: Have tried nearly all the available answers on SO but none of them works!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source