get php variable from dropdown without page submission - php

Question

I am trying to get a value from a dropdown menu and pass it as a php variable and echo it (on the same page).
The dropdown displays the name of users, but select their username, which I want to echo. The purpose it to use the variable to perform other tasks, if I can echo it successfully.
I have used jquery and ajax to get the variable, without submitting the page. But I am unable to get the php variable.
I have read several examples, and used them, but somehow my code is not working.
Can anyone please suggest where is the mistake?
Here is my code:
Test2.php
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table>
<tr>
<td>
<select name="user" id="user" >
<option disabled selected value> - Select User - </option>
<?php
$sql_select = mysqli_query($conn,"SELECT username, surname, fname FROM user WHERE v_flag != 0 ORDER BY surname ASC ");
while ($result = mysqli_fetch_assoc($sql_select)){
$name = ($result['surname']. ', '.$result['fname']);
echo '<option value = " '.$result['username']. '">'.$name.'</option>';
}
?>
</select>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#user").change(function() {
var user = $(this).val();
$.ajax({
url:"test2.php",
data:{username : user},
type:'POST',
success:function(response) {
$("#usermame").html(response);
}
});
});
});
</script>
<?php
if (isset($_POST['username'])){
$username = $_POST['username'];
if (!empty($username)){
echo 'You have selected user: '.$username ;
}
}
?>

Answer 1

<?php
if (isset($_GET['username'])){//only echo user name if requested from js do not include header or footer
$username = $_GET['username'];
if (!empty($username)){
echo 'You have selected user: '.$username ;
}
}else{//you can include here your headers
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table>
<tr>
<td>
<select name="user" id="user" >
<option disabled selected value> - Select User - </option>
<?php
$sql_select = mysqli_query($conn,"SELECT username, surname, fname FROM user WHERE v_flag != 0 ORDER BY surname ASC ");
while ($result = mysqli_fetch_assoc($sql_select)){
$name = ($result['surname']. ', '.$result['fname']);
echo '<option value = " '.$result['username']. '">'.$name.'</option>';
}
?>
</select>
</td> </tr> <tr><td> <span id="username">
<?php if (isset($_POST['username'])){//show if submitted from html form
$username = $_POST['username'];
if (!empty($username)){
echo 'You have selected user: '.$username ;
}
}
?> </span></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$("#user").change(function() {
var user = $(this).val();
$.ajax({
url:"test2.php?username="+user,
success:function(response) {
$("#username").html(response);
}
});
});
});
</script>
<?php
//you can include here your footers
}
?>

Answer 2

Your success handler is printing the request content in a html element with id username that do not exists on the page (at least not on this snippet)
success:function(response) {
$("#usermame").html(response);
}
Try to make the POST request to a different file because, in your case, the printed content will include the select (and the db request) again.