up vote 0 down vote favorite

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?

share|improve this question
How are you calling the function? – Chris Sobolewski Dec 24 '11 at 18:29
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.) – user166390 Dec 24 '11 at 18:29
what 'value' do you think an image could have? I'll think you'll find that an <img> doesn't have a value property. – vascowhite Dec 24 '11 at 18:34

6 Answers

up vote 4 down vote accepted

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

share|improve this answer
THANK YOU SO MUCH. I CANNOT THANK YOU ENOUGH. – mayank23 Dec 24 '11 at 18:36
1  
You can thank him by upvoting or accepting his answer. ;) – Daren Chandisingh Dec 24 '11 at 18:46
up vote 3 down vote

Try this:

 echo "<img src='".$row['filepath']."' id='".$row['ID']."' onclick='getrating(".$row['ID'].");'>";
share|improve this answer
1  
Wouldn't this allow duplicate element ids if the row id value is the same as another id somewhere in the form? – Nonym Dec 24 '11 at 18:35
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 – mayank23 Dec 24 '11 at 18:35
@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. – Daren Chandisingh Dec 24 '11 at 18:39
what if i use a div? – mayank23 Dec 24 '11 at 18:56
If you get [object HTMLImageElement] you can get directly the image ID by using function getRating(img) { var id = img.id; } – Minko Gechev Dec 24 '11 at 19:21
show 1 more comment
up vote 1 down vote

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);
}
share|improve this answer
up vote 0 down vote

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

echo "<img ... onclick='getrating($row[ID]);'>";
share|improve this answer
Wouldn't this allow duplicate element ids if the row id value is the same as another id somewhere in the form? – Nonym Dec 24 '11 at 18:35
No more so than id='".$row['ID']."', but that's another issue. – Daren Chandisingh Dec 24 '11 at 18:37
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 – Nonym Dec 24 '11 at 18:43
thank you very much for this, since this "$row[ID]" was what i needed for the parameter for getrating(). – mayank23 Dec 24 '11 at 19:07
up vote 0 down vote

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().

share|improve this answer
up vote 0 down vote

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'].'\')"
share|improve this answer

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.