1

I have been creating a website where my users can rate images that have been uploaded. Currently i use radio buttons and a submit button to get the users rating and save it within the system. I would like to change this so that the code uses image clicks to get the users rating. So far i have the following code however it only works for one image button. Is there any way to change this to get the result depending on what image has been clicked.

Code:

HTML

<form>
<input
        type="image"
        name="flag_submit"
        src="img/Flag.png"
        onmouseover="this.src='img/Flag_Click.png'"
        onmouseout="this.src='img/Flag.png'"
        height="30"
        width="30"
        />
</form>

PHP

if (isset($_POST['flag_submit_x']))
{
    //Do process of rating.
}

Is there any way that i could create multiple image buttons and in the PHP code detect what image button has been pressed?

Glen Robson
  • 908
  • 2
  • 19
  • 42

5 Answers5

3

  1. Change name to an array name="flag_submit[1]". Assign a different value for each image and you got it.

  2. Read it as an array on php side: if (isset($_POST['flag_submit'][1])).

Or better would be, loop throu if $_POST['flag_submit'] and find all values:

foreach ( $_POST['flag_submit'] as $value )  {
    echo $value . ' has been clicked.';
}

<form method="post">
<input type="image" name="rateButton[1]" src="img/Rate1.png" height="40" width="40" value="1"/> T
<input type="image" name="rateButton[2]" src="img/Rate1.png" height="40" width="40" value="1"/> T
<input type="image" name="rateButton[3]" src="img/Rate1.png" height="40" width="40" value="1"/> T
<input type="image" name="rateButton[4]" src="img/Rate1.png" height="40" width="40" value="1"/> T
</form>
<pre>
<?php
    if ( isset( $_POST['rateButton'] ) ) {
        foreach ( $_POST['rateButton'] as $key => $value ) {
            echo 'Image number '.$key.' was clicked.';
        }
    }
?>

In your case, you don't care, what value it sends, all you need to care about it is the key that was used to submit the form, because there will always be only one key set.

Peon
  • 7,902
  • 7
  • 59
  • 100
  • I have tried this and it doesnt seem to be working. I added the [1]-[10] onto the names of my image buttons and used the if (isset($_POST['flag_submit'][1])) echo "Number 1". When i click the first image the text Number 1 is not shown? – Glen Robson Feb 07 '13 at 11:32
  • Have you set up an `onclick="document.form.submit();` event? – Peon Feb 07 '13 at 11:35
  • I apologise i had a typo in my button name. Its working great. Thanks for your help. – Glen Robson Feb 07 '13 at 11:36
  • Ok its neraly working.... When i loop through the $_POST['flag_submit'] and return the value as you have shown in your answer i am getting random values (14, 23, 24, 29, 17) etc... If i click button one i get a different value every time. – Glen Robson Feb 07 '13 at 11:42
  • What values have you assigned to the images? – Peon Feb 07 '13 at 11:53
  • value="1" - value="10" for each respected input. – Glen Robson Feb 07 '13 at 11:58
  • That is for image 1 – Glen Robson Feb 07 '13 at 13:59
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24133/discussion-between-dainis-abols-and-glen-robson) – Peon Feb 07 '13 at 14:18
1

Here's a trick that might be of help:

I have created an HTML page of the form:

CODE

<html><body><form method="post" action="show_post.php">
<input type="image" name="stamp[1134118800]" src="redstar.gif" value="red">
<input type="image" name="stamp[1134140400]" src="greenstar.gif" value="green">
</form></body></html>

The script to which the form submits, show_post.php, reads:

CODE

<?php
print '<html><body><pre>';

print_r ($_POST);

print '</pre></body></html>';
?>

When I click on the first image, I get:

Array
(
    [stamp] => Array
        (
            [1134118800] => 21
        )

)

When I click on the second image, I get:

Array
(
    [stamp] => Array
        (
            [1134140400] => 15
        )

)

This works with Opera, IE, and Mozilla.

Vishal Bharti
  • 185
  • 1
  • 9
  • I dont exactly understand how this is working. What are the values [1134118800] and [1134140400] and where did you get them from. And why is the result of each of them 21 and 15? – Glen Robson Feb 07 '13 at 11:31
1

The First code works fine for me, the Change name to an array name="flag_submit[1]". Assign a different value for each image and you got it.

Read it as an array on php side:

if (isset($_POST['flag_submit'][1]))
gsamaras
  • 71,951
  • 46
  • 188
  • 305
Prince Adeleye Dairo
  • 7
  • 2
0

You can have multiple <button type="submit"> elements with the same name but different values that can contain the images, only the value of the one that has been clicked will be sent.

For more info, see the specification: http://www.w3.org/html/wg/drafts/html/master/forms.html#the-button-element

Roger C
  • 338
  • 1
  • 5
0

this might help you

<?php
if($_POST['button'])
{
    echo "you have pressed button ".$_POST['button'];
}
?>
<style>
    input.overridecss {
    background-color: transparent;
    border: 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(http://i49.tinypic.com/rm2w0i.png);
}
</style>
<form method="POST">
    <input type="submit" name="button" value="1" class="overridecss"/>
    <input type="submit" name="button" value="2" class="overridecss"/>
    <input type="submit" name="button" value="3" class="overridecss"/>
    <input type="submit" name="button" value="4" class="overridecss"/>
    <input type="submit" name="button" value="5" class="overridecss"/>
</form>
khizar ansari
  • 1,476
  • 2
  • 18
  • 29