PHP: Store Result of JavaScript Function into a PHP Variable

Question

Please bear in mind, I'm very new to PHP. I've only started taking it this semester at my school.

Here's what I want to eventually do: I have a senior project where I'm building a computer repair system. In the repair MySQL table, I have a bunch of fields and one of them is CustomerID (so I know which customers had which repair). I want to have a drop drown of customer's names, and then when I click on it, some how attach that customer's ID to a variable so I can do an INSERT statement. In order to partially achieve this, I've done things in smaller parts. The small part I have working is when I select a dropdown value, it outputs it to the screen, but that's in the javascript function.

Here's my code:

<?PHP
include('session.php');
$db_name = "";
$mysql_username = "";
$mysql_password = "";
$mysql_server = "";
$mysqli = new mysqli($mysql_server, $mysql_username, $mysql_password, 
$db_name);
$query = "SELECT custID, CONCAT(custFirstName, ' ', custLastName) as 
Customer_Name FROM customer";
$result = mysqli_query($mysqli, $query);

echo "<select name ='names' id='myselect' onchange = \"myFunction()\">";
while ($row = mysqli_fetch_array($result)){
echo "<option value = '" . $row['custID'] . "'>" . $row['Customer_Name'] . "
</option>";
}
echo "</select>";
echo "<p>When you select a customer name, a function is triggered which 
outputs the ID of the selected customer.</p>
<p id=\"demo\"></p>

<script>
function myFunction() {
var x = document.getElementById(\"myselect\").value;
document.getElementById(\"demo\").innerHTML =  x;
}
</script>"; 

$content = "<script> document.write(x) </script>";

echo "<br> <br> The technician ID = $sTechID <br> <br> The customer ID = $content";
?>

I can output the ID to the screen with the Javascript function, but when I try to store "x" into a php variable, it doesn't work. In chrome, the inspector says that X is undefined.

A side note: I made a test file with this code and it worked:

<?PHP
echo "
<script> 
var x = \"hello\"
</script>";

$content = "<script> document.write(x) </script>";

echo "$content <br> <br> $content";
?>

Because the above code worked, I don't understand why my bigger code is not working.

I understand that my code is a mess, but any help will be greatly appreciated. Thanks!

Answer 1

I think you need a better understanding of PHP in general. PHP is executed BEFORE the browser executes the html/js that you've echo'd to it. The reason this works:

<?PHP
echo "
<script> 
var x = \"hello\"
</script>";

$content = "<script> document.write(x) </script>";

echo "$content <br> <br> $content";
?>

is because you are writing JS to the dom and it's being executed once your browser reads it. If you run a var_dump($content); you will see that what you have stored in that PHP variable is not the result of x but actually a literal string that contains the text "<script> document.write(x) </script>".

The line echo "$content <br> <br> $content"; prints "<script> document.write(x) </script> <br> <br> <script> document.write(x) </script>"; to the DOM, which in turn is run as JS in the browser.

If you want your drop down selection to do something in PHP I would suggest triggering a JS function on change of the drop down that in turn sends an AJAX request to a separate PHP file that does what you need to do there and returns it to your function. This way you can update the HTML without navigating to another PHP page.

Answer 2

PHP is a back-end language and can't detect front-end events such as click, change, etc.

In your larger code, the value of x will only be defined once the event is fired(onchange), that's when the select input changes. Javascript works that way, but PHP doesn't. Once PHP sends a response the first time, its job is done.

This is when you will want to use forms or Ajax. Using forms would be a good start.

Quick note, it's good practice to try to keep HTML, CSS and JS separate from PHP as much as possible.

...
$result = mysqli_query($mysqli, $query);

?>

<form method='post' action='insert.php' /> <!-- Link to php file to insert data to database -->
  <select name ='names' id='myselect' onchange = "myFunction()">
  <?php 
      while ($row = mysqli_fetch_array($result)){
        echo "<option value = '" . $row['custID'] . "'>" .  $row['Customer_Name'] . "
               </option>";
      }
  ?>
  </select>
  <input type="submit" value="submit" /> <!-- You will need a button to submit the data -->
</form>

<p>When you select a customer name, a function is triggered which 
outputs the ID of the selected customer.</p>
<p id="demo"></p>

And now your insert.php file would look like:

<?php 

// Get data from that was posted from the form
$customer_id = $_POST['names'];

// Now do whatever with the customer ID
echo $customer_id;