Flow of data from PHP file, to JavaScript, then back to PHP

Question

I have a php file with a wordpress shortcode, and when this shortcode is placed on a webpage, it correctly calls a php function from within the php file.

The function, when called, runs an SQL query to find data.

All straight forward so far.

This data (stored in a php array) from the resulting mysql query is then converted to a JS array via JSON which is then used to populate a drop-down list, which is displayed on the webpage using an EOD tag to display the JavaScript drop-down list.

Still all good so far.

I have then programmed in JavaScript, a second drop down list which is dynamically created from the selection made by the user in the first drop-down list. Again within the EOD tag in the same PHP file.

Now comes the bit I don't get.

My question is (and I've been stuck all day long with this issue) how do I then program the return of the selected item (from the second drop-down) back to a PHP variable for further processing?

It seems that to do this all in one PHP file is not possible as although I would need to use Ajax to pass the JS drop-down selection back to the php file, the php file would have already been executed and therefore would not notice the return.

My question therefore is, what is my next step?

Ultimately I want a php file to be able to receive the selected item from the second JS drop-down, so that it can do further processing on that returned data. How do I get a second PHP file to be called into action the moment the second drop-down item is selected by the user of the webpage and how do I get this new PHP file to receive the selected drop-down item?

Edit*******

Here is my code although the most important element is right at the end. I am trying to pass JS variable 'chosenStudent' back to the PHP file.

            $Content3 = <<<EOD

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

            <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);
            }

            </script>

            <script>

            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;
                    $.post('WickCustomLD.php', {variable: chosenSudent});
                    }, false);

            </script>



EOD;


            $Content3 .="\n";
            if(!empty($_POST['variable'])) {
               $chosenStudent = $_POST['variable'];
               echo "<br>";
               echo "<br>";
               echo "<br>";
               echo "<br>";
               echo $chosenStudent;
            }

            return $Content3;

Try using AJAX, thats the only way you can send data from homepage back to server. Maybe I am wrong but I think that is possible with Vue.js, React or Angular? — Jon Nezbit, Jun 12 '20 at 23:10
"the php file would have already been executed", PHP files can be executed multiple times and you can call multiple PHP files. Create new one especially for this function or reuse old one. Is this helpful? — Jon Nezbit, Jun 12 '20 at 23:12
"*the php file would have already been executed and therefore would not notice the return*" That's irrelevant. Every request executes the script separately. — gre_gor, Jun 12 '20 at 23:13
Cool, so how do I get the same PHP file to react to the user's selection? — sw123456, Jun 12 '20 at 23:14
You've answered the question yourself while asking - you need Ajax. (Which absolutely does not require any JavaScript framework, contrary to a previous comment.) [This discussion](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) may be helpful to you in understanding what happens. — Robin Zigmond, Jun 12 '20 at 23:14
@RobinZigmond I didn't say "it is required", I said it is possible, maybe an easier method for the OP — Jon Nezbit, Jun 12 '20 at 23:14
Firstly thank you so for helping. I have edited my post to show you the relevant code that I have so far that doesn't recieve the selected drop down item. As you can see the JS is in an EOD tag. My problem is that I cannot recieve the chosen student in a php variable once the second drop-down selection is made. Any pointers on how I do this would be great. Do I need a separate PHP file ? How can I implement the Ajax call? Anything (code snippets etc) would mean the world to me — sw123456, Jun 12 '20 at 23:31
I don't know too much about wordpress but reading your code seems you are doing everything at same file and it's a little bit confuse. Why don't you call a new php file, process data and return a clean and fresh result? — Éder Rocha, Jun 13 '20 at 01:22

score 1 · Accepted Answer · answered Jun 13 '20 at 01:39

Try change this

$.post('WickCustomLD.php', {variable: chosenSudent});

by this

$.post("NewFile.php", {variable: chosenSudent}, function(data){ 
   alert(data);
   //data contains the echoed value from php
});

Create NewFile.php

<?php
if(isset($_POST['variable'])){
   //manipulate and return value
   echo "Value is ".$_POST['variable'];
}
else
   echo 'error';
?>

Flow of data from PHP file, to JavaScript, then back to PHP

1 Answers1