How can I interact with a javascript variable using PHP?

Question

I have a really simple web app which allows a user to enter a first and last name and hit submit to insert the name into a sql database. Below the form, there is a HTML table displaying the contents of the database table.

If a user clicks on any row of the database, the ID of the HTML element (which is set to the same value of the database ID) is saved to a javascript variable using the following function.

 <!--JS Functions-->
<script>
//Determine which record is selected.   
var id;
function TableSelect(el) {
id = el.id;
alert(id);
}   
</script>

Here is the form:

<!--HTML Form -->
<form method="post" action="index.php">  
    First Name: <input type="text" name="FirstName" value="">
    <br><br>
    Last Name: <input type="text" name="LastName" value="<?php echo $LastName;?>">
    <br><br>
    <input type="submit" name="submit" value="Submit">  
    <input type="submit" name="delete" value="Delete" onclick="Delete()">
</form>

Here is the PHP processing of the data and the output of the SQL table:

 //prepare query to insert data from form into DB
if (isset($_POST['submit'])){
    $query = "INSERT INTO tbl_HR_Master (First_Name, Last_Name) VALUES ('{$FirstName}', '{$LastName}') ";
    $result = mysqli_query($connection, $query);
    //Test if there was a query error
    querycheck($result);
}//end if

//prepare query to populate table from DB   
$query2 = "Select id, First_Name as 'First Name', Last_Name as 'Last Name' from tbl_HR_Master";
$result2 = mysqli_query($connection, $query2);
//Test if there was a query error
querycheck($result2);

//display table
echo "</br>";
echo "<table id=\"tbl_HR_Master\" border='1'><tr class=\"nohover\"\">";
// printing table headers
$fields_num = mysqli_num_fields($result2);
for($i=0; $i<$fields_num; $i++) {
    $field = mysqli_fetch_field($result2);
    echo "<td>{$field->name}</td>";
} //end for
echo "</tr>\n";
// print table rows
while($row = mysqli_fetch_row($result2))
{   
    echo "<tr>";
    $id = $row[0];
    foreach($row as $cell){
    echo "<td onclick=TableSelect(this) id=". $id .">".$cell."</td>";
    }//end foreach
    echo "</tr>\n";
}//end while

I want to run a PHP function which deletes the selected record from the database however, obviously PHP runs on the server, therefore, I need some way to tell PHP which record is selected. Once again, if you look at my Javascript function, var id = the last selected record. How can I parse this JS variable to the server for processing?

In a nutshell, want to do this in PHP:

 //delete selected record
if (isset($_POST['delete'])){
   $query3 = "Delete from tbl_HR_Master where id = ". JS VARIABLE HERE." ";



}   //end if 

Answer 1

Form-based

You could do this with an hidden form field which you give a specific id:

<input type="hidden" id="your-id" value="" />

and then in your TableSelect function you assign the value:

document.getElementById('your-id').value = id;

Then you can access the variable like the other request (post / get) parameters, in your case:

$_POST['id']

Ajax-based

With jQuery you could perform an ajax request like this in your TableSelect function:

 $.ajax({
      url: 'file.php',
      type: 'post',
      data: {'id': el.id},
      success: function(data, status) {
        // ...
      }
 });

Request parameter access is the same:

$_POST['id']

Answer 2

You can have a hidden variable inside your form and use javascript to set the value of that hidden variable onclick.

<!--JS Functions-->
<script>
//Determine which record is selected.   
var id;
function TableSelect(el) {
    document.getElementById('selectedRow').value = el.id;
}   
</script>

And add the following within your form tag

<input type="hidden" name="selectedRow" id="selectedRow">  

Then you can update your query to be something like

   $query3 = "Delete from tbl_HR_Master where id = $_POST['selectedRow']";

Of course don't forget to add sanitization and validation and all that jazz.