Passing values from PHP to JavaScript

Question 1

I'm trying to get the value which is the id in the mysql database. However, each time I click on the image, I get null. I used this to get the value but it is not working as it keeps giving me null in the alert box.

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <?php
 mysql_connect('localhost','root','');
 mysql_select_db("ajax");
 $query="SELECT * FROM xxxx";
 $result= mysql_query($query);
 while($row= mysql_fetch_array($result)){
 echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this.value);'>";
 echo "<br>";
 }
 ?>
 <script type="text/javascript" >
 function getrating(row_id){
 var x = document.getElementById(row_id);
 alert(x);
 }
 </script> 
</body>
</html>

What is the problem?

Question 2

How are you calling the function?

Question 3

What does the HTML look like? Is this what was expected? If so, what is row_id in the JavaScript function? What is x? Is this as expected? Debugging starts with you. (Also, if you just need to pass values, no reason to use DOM element nodes.)

Question 4

what 'value' do you think an image could have? I'll think you'll find that an <img> doesn't have a value property.

Question 5

You need getrating(this.id) instead. Images don't have a value property.

Question 6

THANK YOU SO MUCH. I CANNOT THANK YOU ENOUGH.

Question 7

Try this:

 echo "<img src='".$row['filepath']."' id='".$row['ID']."' onclick='getrating(".$row['ID'].");'>";

Question 8

Wouldn't this allow duplicate element ids if the row id value is the same as another id somewhere in the form?

Question 9

i did that and got [object HTMLImageElement], so then i added value here," var x = document.getElementById(row_id).value;" but now i get undefined. can u help? thanks

Question 10

@mayank23 Your element is an IMG, and as I said, IMG tags don't have 'value' attributes. You could use the id itself, or maybe a data- field. Since the "value" you're after is the same thing you're using as the ID anyway, it seems a redundant step though.

Question 11

If you get [object HTMLImageElement] you can get directly the image ID by using function getRating(img) { var id = img.id; }

Question 12

Or you can pass this.id

<img id="row_12" onclick="getrating(this.id)" alt="image"/>
function getrating(id){
 alert(id);
}

Or you can use the event object and the currentTarget propety

<img id="row_12" onclick="getrating(event)" alt="image"/>
function getrating(e){
 alert(e.currentTarget.id);
}

Question 13

value isn't a valid attribute of the img tag. You could use the id, or just do

echo "<img ... onclick='getrating($row[ID]);'>";

Question 14

Wouldn't this allow duplicate element ids if the row id value is the same as another id somewhere in the form?

Question 15

No more so than id='".$row['ID']."', but that's another issue.

Question 16

Another issue but still true, though.. mayank23 should try to avoid using the id as a value for the id unless it was unlikely to repeat in other parts of the code

Question 17

thank you very much for this, since this "$row[ID]" was what i needed for the parameter for getrating().

Question 18

An <img> doesn't have a value property.

You are doing unnecessary work in your function too. Your code should look like this:-

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <?php
 mysql_connect('localhost','root','');
 mysql_select_db("ajax");
 $query="SELECT * FROM xxxx";
 $result= mysql_query($query);
 while($row= mysql_fetch_array($result)){
 echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this);'>";
 echo "<br>";
 }
 ?>
 <script type="text/javascript" >
 function getrating(element){
 alert(element);
 }
 </script> 
</body>
</html>

By passing this to your function through the onclick event, you already have the element you are looking for without needing to use document.getElementById().

Question 19

They way how you escape the ID could be the problem. I know this is already answered but just in case for those people who needs another solution.

onclick="getrating(\''.$row['ID'].'\')"

Ry- ♦ 226k56 gold badges496 silver badges504 bronze badges · Accepted Answer · 2011-12-24 18:32:48Z

4

You need getrating(this.id) instead. Images don't have a value property.

Share

Improve this answer

answered Dec 24, 2011 at 18:32

Ry-'s user avatar

Ry- ♦

226k56 gold badges496 silver badges504 bronze badges

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

1 Comment

mayank23

mayank23 Over a year ago

THANK YOU SO MUCH. I CANNOT THANK YOU ENOUGH.

2011年12月24日T18:36:44.467Z+00:00

CollectivesTM on Stack Overflow

Passing values from PHP to JavaScript

6 Answers 6

1 Comment

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

6 Answers 6

1 Comment

4 Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related