JavaScript to Pass variable and retrieve output from PHP page - php

Question

Trying to pass a variable to a PHP file then get the output of that file.
Page1.html:
<h2 id="test"></h2>
<script>
var data2;
$.post('textandemail.php',{ txt: "John", email: "test#gmail.com" },
function(data) {
data2 = data;});
document.getElementById("test").innerHTML = data2;
</script>
textandemail.php:
$variable = $_POST["txt"];
$variable2 = $_POST["email"];
echo $variable;
echo $variable2;
Hopefully this describes the desired idea. I will be doing much more in the PHP file but in the end echoing out a response that I want the JavaScript to read and implement into the html page.

Answer 1

The $.post() function is asynchronous. It finishes some time LATER. You need to put the assignment of the results from that function into the success handler, not after the function itself because as you have it now, the line document.getElementById("test").innerHTML = data2; is occurring BEFORE the ajax function has finished and thus it won't work.
This is how you can do it:
<h2 id="test"></h2>
<script>
$.post('textandemail.php',{ txt: "John", email: "test#gmail.com" },
function(data) {
// any code that uses the ajax results in data must be here
// in this function or called from within this function
document.getElementById("test").innerHTML = data;
}
);
</script>
Or, since you have jQuery, you can do it like this:
<h2 id="test"></h2>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$.post('textandemail.php',{ txt: "John", email: "test#gmail.com" },
function(data) {
// any code that uses the ajax results in data must be here
// in this function or called from within this function
$("#test").html(data);
}
);
</script>

Answer 2

Your post call is asynchronous, you have access to the data2 variable only once the process is done, so you should do your ....innerHTML ... in the callback function, when the data is available, not before.
There are plenty of good examples of this on any js sites. On the jQuery doc you have a good example.
Since you are useing jQuery, you could replace your innerHTML call too.

Answer 3

you should use ajax function to make communication between php and javascript
function Ajax_Send(GP,URL,PARAMETERS,RESPONSEFUNCTION){
var xmlhttp
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")}
catch(e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}
catch(e){
try{xmlhttp=new XMLHttpRequest()}
catch(e){
alert("Your Browser Does Not Support AJAX")}}}
err=""
if (GP==undefined) err="GP "
if (URL==undefined) err +="URL "
if (PARAMETERS==undefined) err+="PARAMETERS"
if (err!=""){alert("Missing Identifier(s)\n\n"+err);return false;}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4){
if (RESPONSEFUNCTION=="") return false;
eval(RESPONSEFUNCTION(xmlhttp.responseText))
}
}
if (GP=="GET"){
URL+="?"+PARAMETERS
xmlhttp.open("GET",URL,true)
xmlhttp.send(null)
}
if (GP="POST"){
PARAMETERS=encodeURI(PARAMETERS)
xmlhttp.open("POST",URL,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.setRequestHeader("Content-length",PARAMETERS.length)
xmlhttp.setRequestHeader("Connection", "close")
xmlhttp.send(PARAMETERS)
the call functions put it inside the javascript page
Ajax_Send("POST","users.php",data,e)
where data is the data you send to the php page and e is the function you pass the output of php page to it