PHP: Store Result of JavaScript Function into a PHP Variable - php

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

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;

Answer 2

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.