CODEWITHSUNDEEP
phpjavascripthtmlajax
tyler
tyler

Reputation: 1293

JavaScript to Pass variable and retrieve output from PHP page

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: "[email protected]" },
  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.

Upvotes: 0

Views: 598

Answers (3)

jfriend00
jfriend00

Reputation: 707238

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: "[email protected]" },
    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: "[email protected]" },
    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>

Upvotes: 1

fadi khzam
fadi khzam

Reputation: 13

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

Upvotes: 1

jaudette
jaudette

Reputation: 2313

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.

Upvotes: 1

Related Questions