CODEWITHSUNDEEP
phpjavascripthtmlmysql
Robert Bain
Robert Bain

Reputation: 405

How do I pass this string var in php to a JS function?

I look up the image associated with a pokemon and display it with php. Then I want to be able to "flip the card over," by clicking on it. I've got the first click down, but the second click to flip the card back over isn't working. I figure it's the syntax of my php variable within the JS:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>
'Murica!
</title>

<script>

function changeImage()
{

element=document.getElementById('pokemon_card')

if 
(element.src.match("http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-     back.jpg?w=750"))
{element.src="'.$result['image_url'].'";} //<- no idea how to express the php string variable here

else
{element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?     w=750";}

}

</script>

</head>

<body>

<?php

$dbhost = 'databasePlace';
    $dbname = 'mine';
    $dbuser = 'me';
    $dbpass = '******';

    $link = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);

    mysqli_select_db($link,$dbname);    


$name = $_GET["fname"];



                $query = sprintf("SELECT image_url, Type
                                  FROM Pokemon c
                                  WHERE c.name='%s'",
                mysqli_real_escape_string($link,$name));

    $result = mysqli_fetch_assoc(mysqli_query($link,$query));

    echo '<img id="pokemon_card" onclick="changeImage()" height="225" 
width="165" src="'.$result['image_url'].'"/>';

mysqli_close($link);

?>

</body>
</html>

Upvotes: 1

Views: 269

Answers (5)

Tahir Yasin
Tahir Yasin

Reputation: 11709

  1. You have to modify your Javascript function, below is modified version

    function changeImage(image_from_db)
{
    element=document.getElementById('pokemon_card')

    if 
    (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?w=750")
    {
        element.src = image_from_db;} //<- image_from_db is being passed by you PHP script
    else
    {
        element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?w=750";
    }
}

  2. Then call above function on your image tag like this

enter image description here

Upvotes: 1

tomb
tomb

Reputation: 1827

The easiest way would be to put a little PHP script inside the Javascript, like this...

<script type="text/javascript">
function bla() {
    var thevar = "<?php echo $thevar; ?>";
}
</script>

In other words, according to your question, you would replace the line {element.src="'.$result['image_url'].'";} with the line {element.src="<?php echo $result['image_url']; ?>";}

Upvotes: 7

jaco
jaco

Reputation: 3516

Replace your line with this one:

element.src = "<?= $result['image_url'] ?>";

Or you can set a javascript var and call it:

var imageUrl = "<?= $result['image_url'] ?>";

// ...

element.src = imageUrl;

Upvotes: 1

Hemantwagh07
Hemantwagh07

Reputation: 1556

Try by writing php varible in javascript is as follows

{element.src="'<?php echo $result['image_url']; ?>'";}

Upvotes: 1

Daxen
Daxen

Reputation: 527

You have to use 

 json_encode

 <?php
  $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
  echo $t=json_encode($arr); // {"a":1,"b":2,"c":3,"d":4,"e":5}

 ?>

Now $t you can pass in js function

In js code:

<script type="text/javascript">
function you_fun_nm() {
    var val = <?php echo $t; ?>
     alert(val);
}

Upvotes: 1

Related Questions