problems passing a php variable into JavaScript

Question

I want to pass a php variable into JavaScript. I have to get from a database the questions(randomly, one by one) and if the end user responses correctly, the program is doing something else.

database

+------+-----------------------+---------------+-----------------+
| q_id | description           | text          | answer          |
+------+-----------------------+---------------+-----------------+
|    1 |What is the capital    | United States | Washington D.C. |
|    2 |What is the capital    | California    | Sacramento      |
|    3 |What is the capital    | Maryland      | Annapolis       |
+------+-----------------------+---------------+-----------------+

In the php file, variables $question and $correctAnswer have the following values:

php code:

$sql="SELECT description, text, answer  FROM Questions";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
   $question=$row['description']."of ".$row['text']."?";
   echo($question);
   $correctAnswer=$row['answer'];
   //echo($correctAnswer);
}

javascript code:

var rightAnswer;
function takeQuestion()
{
    var xmlhttp;    
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           document.getElementById("question").innerHTML=xmlhttp.responseText;
           rightAnswer ='<?php echo $correctAnswer;?>';
           alert(rightAnswer); 
        }
    }
    xmlhttp.open("GET","getQuestion.php",true);
    xmlhttp.send();
 }

The program is printing randomly the questions, but I have problems passing the variable $correctAnswer to Javascript. Variable rightAnswer in JavasScript should take the value of php variable $correctAnswer. Any help will be appreciated. Thank you in advance!

you need to send answer along with question from getQuestion.php — GBD
– GBD, Commented Nov 11, 2012 at 16:47
in the alert box I have: <?php echo $correctAnswer;?>; if I do not use quotes, the error is: Uncaught SyntaxError: Unexpected token ? — Lavinia
– Lavinia, Commented Nov 11, 2012 at 16:56

someone · Accepted Answer · 2012-11-11 17:06:34Z

2

In your PHP inside while loop do this

$question=$row['description']."of ".$row['text']."?|".$row['answer'];
echo($question);

in your java script

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var elements = xmlhttp.responseText.split("|");
       document.getElementById("question").innerHTML=elements[0];
       var rightAnswer = elements[1];
       alert(rightAnswer); 
    }

This is an idea. Change it to way that you want.

answered Nov 11, 2012 at 17:06

someone

6,5728 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikas Umrao · Accepted Answer · 2012-11-11 18:14:57Z

1

Change Your javascript as:

Call it as responseXml:

<script type="text/javascript">
var rightAnswer;
function takeQuestion()
{
    var xmlhttp;    
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
           xmlDoc=xmlhttp.responseXML; 
           document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('question')[0].firstChild.nodeValue;
           rightAnswer =xmlDoc.getElementsByTagName('answer')[0].firstChild.nodeValue;
           alert(rightAnswer); 
        }
    }
    xmlhttp.open("GET","getQuestion.php",true);
    xmlhttp.send();
 }

 </script>

Change Your php file as:

<?php
 header('Content-Type: text/xml');
 header ('Cache-Control: no-cache');
 header ('Cache-Control: no-store' , false);     // false => this header not override the previous similar header

$sql="SELECT description, text, answer  FROM Questions";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
   $question=$row['description']."of ".$row['text']."?";
   //echo($question);
   $correctAnswer=$row['answer'];
   //echo($correctAnswer);
} 


$xmlStr='<?xml version="1.0" encoding="UTF-8"?>
<data>
   <question>'.$question.'</question>
   <answer>'.$correctAnswer.'</answer>
</data>
';
echo $xmlStr;
?>

edited Nov 11, 2012 at 18:14

answered Nov 11, 2012 at 17:18

Vikas Umrao

2,5801 gold badge17 silver badges23 bronze badges

6 Comments

Lavinia Over a year ago

I have the error: Uncaught TypeError: Cannot call method 'getElementsByTagName' of null, in this line: document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('question')[0].firstChild.nodeValue;

Lavinia Over a year ago

How can I fix the problem? I like the idea of using XML, but I am pretty new using it.

Lavinia Over a year ago

I know, but why I have that error? I upvoted your answer. It seems to be very elegant, but I really want to make it to work :)

Vikas Umrao Over a year ago

Please now check the updated code for php file.do not forget to put connection in your php file.also there should be no extra space in it.

Lavinia Over a year ago

in JavaScript I only added the code for if() condition, and in php file I added 3 'header' lines and $xmlStr=... and echo $xmlStr. I also added mysql_close($con); before I closed php tag. Can I place header lines wherever in php code, or should be the first 3 lines of my php code?

|

galchen · Accepted Answer · 2012-11-11 17:02:21Z

0

when you have Javascript and PHP on the same page, then you can pass data to the javascript using json_encode:

<?php
$var = 'hello';
?>
<script type="text/javascript">
var v = <?= json_encode($var); ?>;
</script>

without quotes

if you make an ajax call - the variable is not passed through the PHP, but as an http request. You use plain JS in that case

answered Nov 11, 2012 at 17:02

galchen

5,3003 gold badges32 silver badges44 bronze badges

1 Comment

galchen Over a year ago

in your case - there's no php with the javascript. only plain JS

Collectives™ on Stack Overflow

problems passing a php variable into JavaScript

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related