current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite
1

im trying to get the id of the picture the user selected to rate with the onclick,however it will only alert "null". when the user selected the div tag, it will alert the id. i want to display the id. i can build off of this and then implement ajax to rate the picture. But, i need help on getting the id of the picture the user selected.

 <?php

mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);

while($row= mysql_fetch_array($result)){

$rating=$row['ID'];
  echo "<img src='".$row['filepath']."'>";
  echo "<br>";
  echo "<div id='".$row['ID']."' value='".$row['ID']."' onclick='getrating();'>Likes: ".$row['Likes']."</div>";
  echo "<br>";

}

im trying to get what picture the user selected to rate.

?>
<script type="text/javascript" >


function getrating(){
var x= document.getElementById("<?php echo $row['ID']; ?>");


alert(x)



}
</script>
share|improve this question
    
A div can have no value attribute. And the id should not start with a number, unless you use HTML5. –  kapa Dec 24 '11 at 0:46
add comment

4 Answers

up vote 3 down vote

A few things that you should do:

  1. Try giving an id which starts with a letter for example, when writing the HTML code use:

    echo "<div id='img" . $row[ 'ID' ] . "'></div>"

    Note that i've added a prefix 'img' to the div's ID.

  2. You have to pass the correct index to the javascript function because you are drawing the divs in a list but not the javascript function:

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

    Now the javascript function will get the correct image ID when called upon clicking the respective DIV element.

  3. Change the javascript function to:

    <script type="text/javascript" >

   function getrating( id )
   {
       var x = document.getElementById( "img" + id );
       alert( x );
   }

</script>
share|improve this answer
    
function getrating( id ) so the parameter id just "id"? –  mayank23 Dec 24 '11 at 1:20
    
@mayank23: yup, just ID, and while echo-ing the DIV from PHP, every time you do ...onclick='getrating( " . $row[ 'ID' ] . " );'... the value of the current ID will be sent to the javascript for example, for if the ID is 48, the resulting HTML will be: onclick='getrating( 48 );' which means that when the DIV will be clicked, the value 48 will be sent as the id value to getrating() and the element it will try to locate is: img48 –  Yaniro Dec 24 '11 at 1:49
    
so basically you took out value from the div? and wrote this? –  mayank23 Dec 24 '11 at 3:10
    
"<div id='img" . $row[ 'ID' ] . "'onclick='getrating( " . $row[ 'ID' ] . " );'</div>" –  mayank23 Dec 24 '11 at 3:11
    
@mayank23, well, i kept it on the DIV but you could get rid of the image all togather like you're suggesting if it doesn't serve any other purpose besides handling the click (the image can do that by itself). –  Yaniro Dec 24 '11 at 9:59
show 1 more comment
up vote 0 down vote 
onclick="getrating(this.value);"

That code will pass the current value attribute of the div to the function you made in JavaScript. Be sure to add a parameter to your function to receive the data.

share|improve this answer
2  
This is correct but sort of a sloppy answer... he'll need to change the function definition as well. –  Interrobang Dec 24 '11 at 0:26
add comment
up vote 0 down vote

Easy.

Change this:

  echo "<div id='".$row['ID']."' value='".$row['ID']."' onclick='getrating();'>Likes: ".$row['Likes']."</div>";

to this:

  echo "<div id='".$row['ID']."' value='".$row['ID']."' onclick='getrating(this.value);'>Likes: ".$row['Likes']."</div>";

And this:

function getrating(){
    var x= document.getElementById("<?php echo $row['ID']; ?>");

to this:

function getrating(row_id){
    var x= document.getElementById(row_id);
share|improve this answer
    
echo "<div id='".$row['ID']."' value='".$row['ID']."' onclick='getrating( this.value);'>Craves: ".$row['craves']."</div>"; function getrating(row_id){ var x = document.getElementById(row_id); alert(x); i put this in, but it only displays null –  mayank23 Dec 24 '11 at 0:55
    
Check your markup. What gets generated? Do divs have proper ids and values? –  Sergio Tulentsev Dec 24 '11 at 0:59
    
this gets generated by the browser: –  mayank23 Dec 24 '11 at 1:03
    
what gets generated? –  Sergio Tulentsev Dec 24 '11 at 1:05
    
<img src='images/2.png'><br><a id='12' value='12' onclick='getrating( this.value);'>likes: 0</a><br><img src='images/Cover.jpg'><br><a id='14' value='14' onclick='getrating( this.value);'>likes: 0</a><br> <script type="text/javascript" > function getrating(row_id){ var x = document.getElementById(row_id); alert(x); } </script> –  mayank23 Dec 24 '11 at 1:05
show 2 more comments
up vote 0 down vote

You should put your event handler inside image like this: 

<img src="" onclick="getrating(this.value)">

And you function should be like this: 

function getrating(row_id){
    x = document.getElementById(row_id);
    alert(x);
}
share|improve this answer
    
echo "<div id='".$row['ID']."' value='".$row['ID']."' onclick='getrating( this.value);'>Craves: ".$row['craves']."</div>"; function getrating(row_id){ var x = document.getElementById(row_id); alert(x); i put this in, but it only displays null –  mayank23 Dec 24 '11 at 0:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.