Cannot get PHP session variable back to JQuery - php

Question

I know there have been tons of questions about setting a PHP session from JQuery and then returning it to JQuery. And I have looked at all of them and still cannot figure out why my code doesn't work. I am trying to use a modal to set a PHP session variable on a back end PHP page and then display it in another modal using jquery, but nothing gets returned.
Here is my sending modal:
<div id="sendingModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<button id="testSession" type="button" class="btn btn-secondary">Session Test</button>
</div>
</div>
</div>
and here is my back end php:
<?php
session_start();
$_SESSION['testInput'] = $_POST['inputData'];
?>
and here is my receiving modal:
<div id="receivingModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="testDiv"></div>
</div>
</div>
</div>
Here is my JQuery:
$(document).ready(function() {
$('#testSession').on('click',function(e){
var testData = 'testing 123';
$.post("backendSession.php", {"inputData": testData});
$('#testSession').html(<?=$_SESSION['testInput']?>);
$('#testModal').modal('show');
});
});
What am I doing wrong?

Answer 1

You only have a small issue here, and its a simple fix based on the code you provided. You MUST return the new data back during the ajax call, or you will not be able to use it (not until, that is, a whole new page refresh).
First up, add to your backendSession.php:
<?php
session_start();
$_SESSION['testInput'] = $_POST['inputData'];
echo htmlspecialchars( $_SESSION['testInput'] );// new bit
?>
Then adjust your .post usage as follows:
$(document).ready(function() {
$('#testSession').on('click',function(e){
var testData = 'testing 123';
$.post("backendSession.php",
{"inputData": testData},
function( rawdata ) { // add return handler callback
$('#testDiv').html( rawdata ); // use the return data
$('#testModal').modal('show'); // show the modal
}
);
});
});
Now that is the basic change to make what you were wanting to do. However you may want to deal with JSON return data in the future, if you plan on needing more than just an echo of the input. An example of that will go beyond the question though ;)
As another side: You probably will want to sanitize that post input. I know what you provided was a minimal example, but I just wanted to mention it. As simply echoing out the raw user input, back into a page, can open up some XSS attack vectors.