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?
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])).
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.
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.
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]))
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
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>
Related
(first page)
<form action="page1.php" method="post">
<input type="image" src="images/leavecredits.png" name="btnImage" id="btnImage" value="uuuu"/>
<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="yyyy"/>
<input type="image" src="images/leavecards.png" alt="Submit" width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;" onMouseOver="this.src='images/leavecards_onmouseover.png'" onMouseOut="this.src='images/leavecards.png'"
id="btnLeaveManagement2" name="btnLeaveManagement2" value="leavecards">
</form>
(page1.php)
<?PHP
echo "<br>hiddenEmpID: " . $_POST['hiddenEmpID'];
echo "<br>btnImage: " . $_POST['btnImage'];
?>
result:
hiddenEmpID: yyyy
Notice: Undefined index: btnImage .... in line....
btnImage:
value of the type image input does not appear on the next page
browser: chrome and mozilla
what do you think is wrong guys?
(possible solution if value really does not work)
Hi guys, since i really want to try using type="image" as a button i came up with this dirty code on php
<form action="page1.php" method="post">
<input type="image" src="images/leavecredits.png" alt="Submit" id="btnLeaveManagement" name="btnLeaveManagement" width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;" onMouseOver="this.src='images/leavecredits_onmouseover.png'" onMouseOut="this.src='images/leavecredits.png'" >
<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="leavecards"/>
</form>
<form action="page1.php" method="post">
<input type="image" src="images/leavecredits.png" alt="Submit" id="btnLeaveManagement" name="btnLeaveManagement" width="100" height="100" style="background-color:#FFF; border:dotted #CCCCCC thin;" onMouseOver="this.src='images/leavecredits_onmouseover.png'" onMouseOut="this.src='images/leavecredits.png'" >
<input type="hidden" id="hiddenEmpID" name="hiddenEmpID" value="leavecredits"/>
</form>
echo "<br>hiddenEmpID: " . $_POST['hiddenEmpID'];
now it will depend on hidden input's value
The HTML spec for an image input says that it does not pass along a value. Instead it may pass along the x and y coordinates of where you clicked on the image. Read more here...
Regardless if you want to use an image as a regular submit button, wrap an image inside of a form button with type submit.
<button type="submit" ... ><img src="image.jpg" .../></button>
An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.
Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use your images so long as they are part of a type="button".
Please use hidden field or input type button instead of input type image.
I have a hyperlink as shown:
<div style="clear:both"> <a color="grey" accesskey=""style="float: right" href="newbattle.php? userid= <?php echo $id0; ?>"> [<font color="grey">Attack</font>]</a><br></div> <br>
Is it possible, using only only php, to carry POST data? I want to put this
<input type="hidden" name="test" value="<?php echo $number;?>
So I can $_POST['test'] on the other page and get the $number. I can switch over to normal form but I really like what I have
No, that's not possible. If you want to submit a POST request, you should go through a <form> and submit it.
You cannot post through a hyperlink, unless you use JavaScript to capture the click event and simulate a click on a submit button.
But a better approach, I think, would be to make an actual submit button. With a bit of CSS you can style that button to look as if it was a hyperlink. That way, if the CSS fails, you've still got a working button, while if a JavaScript issue would occur, you have a disfunctional link with unexpected behaviour.
input[type=submit] {
display: inline;
border: none;
background-color: transparent;
color: blue;
cursor: pointer;
}
input[type=submit]:hover {
text-decoration: underline;
}
<form action="otherpage.php" method="POST">
<input type="hidden" name="test" value="<?php echo $number;?>">
<input type="submit" value = "Look, I'm a link!">
</form>
A link redirects user to another page, it's purpose is not for get/post requests.
If you want to send a post request on a click, you can do it with a submit button inside form. For example,
<form action="another_page.php" method="POST">
<input type="hidden" name="test" value="<?php echo $number;?>
<input type="submit" />
</form>
Style the button like a hyperlink and it will send a post request as expected.
You can do that using a form.
When the user clicks the link, the form is submitted with the "test" variable and the "userid" variable.
Here's the code:
<form method="post" action="newbattle.php" id="myForm">
<div style="clear:both">
<a color="grey" accesskey="" style="float:right;" href="" onclick="javascript:document.myForm.submit(); return false;">[<font color="grey">Attack</font>]</a>
<br/>
</div>
<br/>
<input type="hidden" name="userid" value="<?php echo $id0; ?>" />
<input type="hidden" name="test" value="<?php echo $number; ?>" />
</form>
For my specific problem, here's what I ended up doing.
href="newbattle.php?userid= <?php echo $id0; ?>&num=<?php echo $number; ?>"
I added the $number on to the hyperlink and then retrieved it with $_GET on the next page
If you want to access test value by $_POST you have to use form like this :
<form action="another_page.php" method="POST">
<input type="hidden" name="test" value="<?php echo $number;?>
<input type="submit" />
</form>
get.php :
<?php
$num = $_POST['test'];
echo $num;
?>
So here is my problem. I have the following form:
<form name="picture_categories" action="scripts/catalog.php" method="post">
<input class="visibleForm" onclick="return false;" type="image" src="images/smartphones.png"/>
<label for="smartphones">Smartphones</label>
<input type="hidden" name="device" value="smartphones" />
<div class="hiddenForm" style="display:none">
<input src="images/logos/apple-logo.png" type="image" name="manuf" value="APPLE" />
<input src="images/logos/samsung-logo.png" type="image" name="manuf" value="Samsung" />
<input src="images/logos/blackberry-logo.png" type="image" name="manuf" value="Blackberry" />
<!-- <input src="images/logos/htc_logo.png" type="image" name="manuf" value="HTC" /> add to catalog first-->
<input src="images/logos/lg-logo.png" type="image" name="manuf" value="LG" />
</div>
</form>
Supposedly, when I click on one of inputs[name='manuf'] it submitts its value along with hidden input ('device') value to next page.
Now, the next page has following script:
<?php session_start(); ?>
<?php
if(isset($_POST['device'])) {
$_SESSION['device'] = $_POST['device'];
}
if (isset($_POST['manuf'])) {
$_SESSION['manuf'] = $_POST['manuf'];
}
header ("Location: ../display_catalog.php");
?>
And the last page - display_catalog.php uses $_SESSION data to display related part of the catalog.
The code works excellent in Chrome; however:
In Firefox somehow ignores $_SESSION['manuf'] variable. So it sorts my catalog correctly by $_SESSION['device'], but does not want to sort it by manufacturer name.
In IE it completely ignores both $_SESSION variables.
What could be the issue here?.
That's because input buttons of type image carry the x,y coordinate of the button, not the value (the button is used to make an image act as a submit). Its behaviour is very browser-dependent, that's why you see it working so differently across browsers.
If you want to customize with images and have a submit button properly working you could use the <button> element and style it with CSS background property or put an img element directly:
Something like:
<button type="submit" name="manuf" value="apple"><img src="apple-image.png"></button>
<button type="submit" name="manuf" value="samsung"><img src="somsung-image.png"></button>
I have a form with multiple submit buttons.
Each submit button is an IMG SRC trash can which denotes the delete icon for messages in a web based messaging mail inbox
what is the best way to figure out which submit button icon was clicked so that I can then write the PHP/MySQL code to DELETE the message?
if(!empty($_POST)){
// How do I figure out which submit button has been clicked to get the ID of the message to delete?
}
<form method="POST">
<input src="http://www.foo.com/img.png" id="button_1">
<input src="http://www.foo.com/img.png" id="button_2">
<input src="http://www.foo.com/img.png" id="button_3">
<input src="http://www.foo.com/img.png" id="button_4">
...
<input src="http://www.foo.com/img.png" id="button_100">
</form>
Set value for each submit button and check that in php and find which one is clicked
<form method="POST">
<img src="http://www.foo.com/img.png" id="button_1" name="submit_btn" value="1">
<img src="http://www.foo.com/img.png" id="button_2" name="submit_btn" value="2">
<img src="http://www.foo.com/img.png" id="button_3" name="submit_btn" value="3">
<img src="http://www.foo.com/img.png" id="button_4" name="submit_btn" value="4">
...
<img src="http://www.foo.com/img.png" id="button_100" name="submit_btn" value="100">
</form>
echo $_POST['submit_btn']; will give you the value of which submit button is clicked
Give each button a name=""
Then you can do something like
isset($_POST['button_name']) {
// execute code here if true
}
THE solution of this problem is to use the NAME attribute of the tag input/button.
<input type="submit" name="submitSave" value="Save"/>
<input type="submit" name="submitAddComment" value="Add comment"/>
or
<button type="submit" name="submitSave">Save</button>
<button type="submit" name="submitAddComment">Add comment</button>
I think you can also use the value attribute of button tag, this is definitively not possible with input tag.
If you need to use an ID or another variable, use name="submitDelete[888]"
Then, check it with PHP:
if( isset($_POST['submitDelete']) ) {
echo key($_POST['submitDelete']);// Displays the ID to delete, e.g. 888.
}
So many years later, I like button because it allows to display a text or an image independently of the value returned.
Here is an illustration of possibilities which fits the title of this post and more cases than the OP.
<?php
if(!empty($_POST['id'])){
echo 'button '. $_POST['id'] .' clicked';
} elseif ('create' === ($_POST['action'] ?? '')) {
echo 'create clicked'; // ?action=create
} elseif (isset($_POST['action'])) {
echo 'refresh clicked'; // ?action
} elseif (isset($_POST)) {
echo 'Default clicked'; // ?
}
?>
<form method="POST">
<!-- Original Post examples -->
<button type="submit" name="id" value="1"><img src="http://www.foo.com/img.png"></button>
<button type="submit" name="id" value="2"><img src="http://www.foo.com/img.png"></button>
...
<button type="submit" name="id" value="100"><img src="http://www.foo.com/img.png"></button>
<!-- Additional possibilities -->
<!-- ?action=create -->
<button type="submit" name="action" value="create">New element</button>
<!-- ?action -->
<button type="submit" name="action">Refresh</button>
<!-- ? -->
<button type="submit">Default</button>
</form>
you can give a name and a value to each of your buttons. It will then show up under $_POST['submit']
<img src="http://www.foo.com/img.png" id="button_4" name='submit' value='4' />
You have to pass your value to the current file by declearing name and value for each.. then you can echo in your php script in order to know which one is clicked.
This question will show what a newbie I am. The situation is this. It's a photo contest.
People upload a photo and to the right on the same line is a checkbox.
Voters check the box if they like the photo. They can select up to, say, 5 photos.
Keeping it simple, my problem isn't with MySQL, but with the form. Each row has a checkbox, which is a form. The SUBMIT button is the problem. The only way I can figure out to have submit work is by putting a submit button with each checkbox. Of course, that's ridiculous. What I want is to read all the checked boxes and have ONE submit button when the voter is finished. Spent hours on this and can't see how to have the SUBMIT by itself that the voter can click and have all the checked values inserted into the database a one time.
Any notions? I know this sound very primitive, but just getting into this.
Thanks ahead of time for any help
You can enclose all the checkboxes in a single html form tag and have the submit button inside it. It'll automatically submit data in all checkboxes
Or
You can use javascript/jQuery to run through all the checkboxes. And submit the form.
Well, there are all sorts of javascript ways to go out and grab the data you want and submit it, but let's keep it simple.
[voteform.html]
<form action="process_script.php">
<img src="image1"><input type="checkbox" name="vote_for_image[]" value="1">
<img src="image2"><input type="checkbox" name="vote_for_image[]" value="2">
<input type="submit">
</form>
... then ... (please note the [RETURN ERROR...] and [DATABASE...] blocks are just place holders for you to fill in code)
[process_script.php]
<?
if (count($_GET['vote_for_image'] > 5) {
[RETURN ERROR 'Please select no more than 5 images to vote for']
}
else {
foreach ($_GET['vote_for_image'] as $index => $image_id) {
[DATABASE INSERT OR UPDATE FOR $image_id]
}
}
?>
Set the checkbox[] as name attribute for each checkbox and on submission you can address the valiues as arrays
<body>
<form action="checkbox.php" method="post">
<input type="checkbox" name="checkbox[]" value="a">
<input type="checkbox" name="checkbox[]" value="b">
<input type="checkbox" name="checkbox[]" value="c">
<input type="checkbox" name="checkbox[]" value="d">
<input type="submit" name="Submit" value="Submit">
</form>
<?php
if(isset($_POST['Submit']))
{
echo $_POST['checkbox'];
}
?>
</body>
the above will give you
Array (
[0] => a
[1]=>b
[2] => c
[3]=>d
)
Try this code
//HTML
<form method='post'>
<input type='checkbox' name='photo[]' value='1' />
<img src='test1.jpg' />
<input type='checkbox' name='photo[]' value='2'/>
<img src='test2.jpg' />
<input type='submit' value="Submit" name="submit" />
</form>
//PHP
if(isset($_POST['submit']))
{
if(isset($_POST['photo']))
{
if(count($_POST['photo']) > 5)
{
// Display error msg
}
else
{
// Contains all ids voted on
$img_ids=explode(',',$_POST['photo']);
// insert or update DB for the image ids
}
}
}