How to determine which image has been clicked using php

Question

I have got multiple images on my webpage and I am using them as a button and I want to know which image was clicked by a user and post it to another form. I am only concerned with which image was clicked either that is being done by associating any value as a flag to each image and posting it to other form or any other way. Here is link which I found to be relevant but it doesn't work PHP multiple image button submit form. I need a value of the image for further comparison.

and here is my code:

<FORM NAME ="form1" METHOD ="POST" ACTION = "SimulatedOutput.php">
<input type="image" name="rateButton[1]" src="observation1.jpg" width="400" height="300" value="1">T
<input type="image" name="rateButton[2]" src="observation2.jpg" width="400" height="300" value="1">T
<input type="image" name="rateButton[3]" src="observation3.jpg" width="400" height="300" value="1">T
<input type="image" name="rateButton[4]" src="observation4.jpg" width="400" height="300" value="1">T

SimulatedOutput.php
<?php
if ( isset( $_POST['rateButton'] ) ) {
        foreach ( $_POST['rateButton'] as $key => $value ) {
        echo 'Image number '.$key.' was clicked.';

    }
    if(name==rateButton[1])
    {
      //do something as required
    }
    else if(name==rateButton[2])
    {   .....}

    }
?>

I am afraid you will need to change the naming. Also it would be interesting to see `var_dump($_POST);` — Your Common Sense, May 29 '13 at 13:59
How does setting an `input` tag show the image on your page? You want to use the image as a button right. Why aren't you enclosing an `img` tag in an `` block? — hanut, May 29 '13 at 14:02
Is the data form the image the only data you need? If that's the case you can wrap the image in and add a GET parameter to the link (href). — Putr, May 29 '13 at 14:03
Possibly related: http://stackoverflow.com/questions/7935456/input-type-image-submit-form-value — Blazemonger, May 29 '13 at 14:07
Yes I want to use image as a button but when I post it to other form it I should get a value to check which image was clicked in my previous form. Thanks that was really quick response by all :) — Maria, May 29 '13 at 14:08

score 1 · Answer 1 · answered May 29 '13 at 14:06

Even though the way you are doing it may not be the most elegant way, assuming this is exactly how you want to do it, then perhaps this piece of code will help:

<?
    if( $_POST['rateButton'] ) {
        $keys = array_keys($_POST['rateButton']);
        $clicked = $keys[0];
        print "Image pressed: $clicked";
    }
?>

<form method="post">
    <input type="image" name="rateButton[1]" src="observation1.jpg" width="400" height="300" value="1">T
    <input type="image" name="rateButton[2]" src="observation2.jpg" width="400" height="300" value="1">T
    <input type="image" name="rateButton[3]" src="observation3.jpg" width="400" height="300" value="1">T
    <input type="image" name="rateButton[4]" src="observation4.jpg" width="400" height="300" value="1">T
</form>

I don't get any output through my php script even with the one I posted — Maria, May 29 '13 at 14:40
Then the problem may be someplace else. The above code works and prints the number of the clicked image, which is what you wanted. — DannyB, May 29 '13 at 15:42

score 1 · Answer 2 · 2013-05-29T15:24:43.950

1

You can simply use the image using <a>

HTML CODE:

<a href="SimulatedOutput.php?value=1"><img src="http://yoursite.com/image1.jpg"></a>
<a href="SimulatedOutput.php?value=2"><img src="http://yoursite.com/image2.jpg"></a>
<a href="SimulatedOutput.php?value=3"><img src="http://yoursite.com/image3.jpg"></a>

PHP CODE:

if(isset($_GET['value'])) 
{
    $your_value = $_GET['value'];
}

if($your_value=="1")
{
   echo 'Image number '.$your_value.' was clicked.';
}
else if($your_value=="2")
{   
    echo 'Image number '.$your_value.' was clicked.';

}else{
    echo 'Image number '.$your_value.' was clicked.';
}

This is a very simple code to let you understand the basics. You could use a SWITCH here or simply getting the value and based on it doing your function. But the above code should give you enough info to get started.

edited May 29 '13 at 15:24

answered May 29 '13 at 14:06

can you elaborate a bit what does this href mean and what if I put the name of my script rather than the link like this Would it be correct for all images I make value= 1 then 2 then 3 and so on. – Maria May 29 '13 at 15:04
Assigning a value to the href does not give you any result. Href is simply the HTML tag to add a link over an image, a text or anything else. So look: In this way you have assigned a value to the SimulatedOutput.php file that you can then retrieve using the code I wrote above. I'll edit the code to make it clearer. Please after this accept my answer or at least give me a plus :D – May 29 '13 at 15:18

score 0 · Answer 3 · answered May 29 '13 at 14:09

If you need to do it as a post, one way to do it is with a form with the method set to post:

<form method=POST id=x>
  <input type="image" name="rateButton[1]" src="observation1.jpg" width="400" height="300" value="1" onclick='document.getElementById("x").submit();'>T
  <input type="image" name="rateButton[2]" src="observation2.jpg" width="400" height="300" value="1" onclick='document.getElementById("x").submit();'>T
  <input type="image" name="rateButton[3]" src="observation3.jpg" width="400" height="300" value="1" onclick='document.getElementById("x").submit();'>T
  <input type="image" name="rateButton[4]" src="observation4.jpg" width="400" height="300" value="1" onclick='document.getElementById("x").submit();'>T
</form>
<?php
if ( isset( $_POST['rateButton'] ) ) {
    foreach ( $_POST['rateButton'] as $key => $value ) {
        echo 'Image number '.$key.' was clicked.';
        switch ($key) {
                case 1:
                // Do something for button 1
                break;
                ///...
        }
    }

}
?>

How to determine which image has been clicked using php

3 Answers3

Linked