UPDATE: problem solved... see answer below
Summary:
I'm having trouble passing a variable from one PHP routine to JavaScript and then passing that same variable from JavaScript to a different PHP routine. JavaScript gets the variable from the first PHP routine and can work with it in JavaScript, but it doesn't seem to have it when I try to send it to a second PHP routine. Checking both before and after sending to the second PHP routine show that JS has the variable, but the PHP routine just gets null.
Details:
I want to pass a variable from PHP to JavaScript, do some stuff in JavaScript, then pass from JavaScript to PHP a new variable and the original PHP variable. In other words:
- Pass PHP variable --> JavaScript
- JavaScript does stuff and gets a resulting variable
- Pass JavaScript variable and PHP variable (from step 1) --> PHP
I pass the PHP variable to JavaScript by echoing the data into the page and use JavaScript to pull it from the DOM, an idea I found in the second suggestion in this great StackOverflow answer about passing variables from PHP to Javascript. Here's the code I'm using for this. There's no problem with it, it works great (or at least seems to?!).
<style>
#rp {display: none;}
</style>
<div id="rp">
<?php
$output = "php variable being passed to JavaScript";
echo htmlspecialchars($output);
?>
</div>
<script>
function getMyData(){
var div = document.getElementById("rp");
var myData = div.textContent;
return myData;}
</script>
The problem is that when I try to use JavaScript to pass the variable back to PHP, it's not there. I can use it in JavaScript, do things with it, print it, play with it, whatever I want... but it's not there if I try to send it back to PHP. The code I use to pass it back:
<script language="JavaScript" type="text/javascript">
var PHPVar = getMyData(); //function that gets PHP data from DOM
var jsResultVar = getJSVar(); //function that does JS stuff and returns a result
var hr;
if (window.XMLHttpRequest) {
// Mozilla, Safari, ...
hr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
// IE 8 and older
hr = new ActiveXObject("Microsoft.XMLHTTP");
}
var hr = new XMLHttpRequest();
var url = "parseData.php";
var vars = "javaScriptResult="+jsResultVar+"&PHPVar="+PHPVar;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.send(vars);
</script>
In this code, the variable calculated by JavaScript, jsResultVar, gets sent from JavaScript to PHP with no problem.
If I hardcode PHPVar in the code above, e.g. "var PHPVar = 42", then the variable gets sent from JavaScript to the PHP routine with no problem.
But when I try to send the variable which PHP inserts for JavaScript to pull from the DOM, it doesn't get sent and sends a null instead. PHPVar definitely contains the variable in JavaScript; I've checked in simple ways by just writing it with JS onto the html page, and it's there both before and after trying to send to the PHP routine. But it just sends null to PHP.
What am I doing wrong?
PROBLEM SOLVED:
The suggestion of @vrijdenker was the right idea.
I played around with the line spacing of the code which PHP uses to send the variable to JavaScript. The code definitely works with the original line spacing in that JS can get the variable and use it... but the code can't be used as written to send that variable back from JS to a different PHP routine.
By changing the line spacing to put all of it on one line, JS is able to send the variable to the second PHP routine.
I actually pulled that code with the not-quite-working line spacing essentially verbatim from this great StackOverflow answer. I don't understand white-space issues well enough to suggest updating that answer, and I don't have the reputation points to put a comment on @SecondRikudo's answer, but if anyone is knowledgeable enough, it'd be helpful for the next person who hits this problem after using that code.
:)