Converting Javascript to PHP Variable

Question

I'm looking for some help I am trying to get the value that is selected on the first dropdown (id="select1") without submitting the form after some research I have been able to get the value of the first dropdown and output it with an alert with the below.

 <select name="select1" id="select1" class="form-control" required="required" 
 onchange="getValue(this)">

 <script>
 function getValue(obj){
 alert(obj.value);
 }
 </script>

What I'm struggling to do is store it as a php variable which I can use in the second dropdown (id="select2) this is my code any help with pointing me in the right direction would be appreciated.

 <div class="form-group">
 <label>Select 1</label>
 <br>
 <select name="select1" id="select1" class="form-control" required="required" 
 onchange="getValue(this)">
 <option disabled selected>-- Select 1 --</option>
 <?php
 $records = mysqli_query($conn, "SELECT name1 From table_001");   

 while($row = mysqli_fetch_array($records))
 {
 echo "<option value='". $row['name1'] ."'>" .$row['name1'] ."</option>";  
 }  
  ?>
  
  </select>
 </div>
 
 <script>
 function getValue(obj){
   return(obj.value) ;
 }
 </script>
 
 <?php
 $phpvar = "OUTPUT OF THE ABOVE JS";
 ?>
 
 <div class="form-group">
 <label>Select 2</label>
 <br>
 <select name="select2" id="select2" class="form-control" required="required">
 <option disabled selected>-- Select 2 --</option>
 <?php
 $records1 = mysqli_query($conn, "SELECT name2 From table_002 where name1 = '$phpvar'");   
      
 while($row = mysqli_fetch_array($records1))
 {
 echo "<option value='". $row['name2'] ."'>" .$row['name2'] ."</option>";  
 }  
 ?>
 </select>
 </div>

Answer 1

If I've understood your question right, you can't just "store" a variable in php . PHP is a server side, JS is a client side. The only way to exchange data between them is an http request-response pair. (We're not talking about websockets etc)

You can do the http request in two ways:

1. Form submit. When you're submiting a form, the data form this form is sent to a server either via GET or POST method. Then the server performs some actions and send a response. The page then is refreshed (or you are redirected to another page etc).
2. AJAX request. The principle is the same except you don't leave the actual page (there is no page refresh or redirection). The JS code is doing a request, then it receives a response event when response comes from server, and then you can do whatever you want with this response (insert it on the page, change select value etc).

Form submit way

I don't think this is your case, cause you need first of all submit the first form and then the page will be refreshed and the new page will be returned with the first form cleared but with a desired value inserted from php in a second form

AJAX way

This is the preferable solution for you. You can make an ajax request either withXMLHttpRequest (the old way) or fetch (the modern way). These are two native ways in browser (there exist also a lot of libraries, like jquery.ajax(), that are mostly the wrappers above these two methods described above).

Here is a basic example using fetch API, you may put this in a onChange event handler for your first select (:

fetch('./some_address.php')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // your server-side script may return a complex (or not :) json object or just a plain text, read the documentation for your case
    return response.json(); // or return response.text();
  })
  .then((data) => {
    // do whatever you need with your response from the server, for example set the value for your second select
  });