javascript - AJAX sends JS variable to PHP OK but the receiving PHP doesn't echo back to webpage

I have 2 php files. The first contains some JavaScript which is inside an EOD tag. This code has two dynamic drop down lists with an event listener which correctly listens to when the second list item is selected.

The item selected is correctly sent to another PHP file for further processing.

This is the JS Script code in my first PHP file:

$js_array_leadersGroupsName = array("group1", "group2");
$js_array_students_lists = array(["Bob", "Jane"], ["Sally", "Tom"]);


$js_array_leadersGroupsName = json_encode($js_array_leadersGroupsName);
$js_array_students_lists = json_encode($js_array_students_lists);


$Content3 = <<<EOD


            <form action="" id="myGroupSelectForm" method="post">
              <select id="selectGroup">
                <option>Choose a Group</option>
              </select>
                <select id="selectStudent">
                <option>Choose a Student</option>
              </select>
            </form>

            <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

            <script type="text/javascript">

            var select = document.getElementById("selectGroup"); 
            var options = {$js_array_leadersGroupsName}; 
            var i;

            for(i = 0; i < options.length; i++) {
                var opt = options[i];
                var el = document.createElement("option");
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }

            var studentList = {$js_array_students_lists}; 
            var select2 = document.getElementById("selectStudent");

            var a = document.getElementById('selectGroup');
            a.addEventListener('change', function() {

                var i;
                for(i = 0; i < options.length; i++) {
                        if ((this.value) == options[i]) {
                            var chosenStudentList = studentList[i];
                        }
                    }

                var select = document.getElementById("selectStudent");
                var length = select.options.length;
                for (i = length-1; i >= 0; i--) {
                  select.options[i] = null;
                }

                var i;
                for(i = 0; i < chosenStudentList.length; i++) {
                    var opt = chosenStudentList[i][0];
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    select2.appendChild(el);
                }

                }, false);

                var b = document.getElementById('selectStudent');
                b.addEventListener('change', function() {
                    var chosenSudent = this.value;
                    alert(this.value);

                    $.ajax({
                    type: "POST",
                    url: '/path/to/NewFile.php',
                    data: "userID=" + chosenSudent,
                    success: function(data)
                    {
                        alert("success!");
                    }
                    });

                    }, false);



            </script>

EOD;



            $Content3 .="\n";       
            return $Content3;
Copy code

This is the code in my second PHP File:

<?php
if(isset($_POST['userID']))
{
    $uid = $_POST['userID'];
    echo  $uid;
}
?>
Copy code

My question:

I cannot get my second php file's echo command to display the $uid variable on the webpage after the second drop-down item is selected. How can this be done?

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.