I am using 2 images in a form to sort out query results from the database. The form is submitted using the POST method. When i click on the first image, the query results have to be sorted in ascending order, and when i click on the second, the results have to be sorted in the descending order.
This is the code for the form:
<form name="" action="" method="post">
<input type="hidden" name="typep" value="price" />
<input type="image" name="sort" value="asc" src="images/asc-ar.png" />
<input type="image" name="sort" value="desc" src="images/dsc-ar.png" />
</form>
Now this is the code for checking if the $_REQUEST['sort'] variable is set and therefore whether sorting is required or not.
if ($_REQUEST['sort'] != "")
{
$sort = $_REQUEST['sort'];
$typep = $_REQUEST['typep'];
//query to be executed depending on values of $sort and $typep
}
Firefox does detect the $_REQUEST['typep'] variable but not the $_REQUEST['sort'] one.
This works perfectly in Chrome though. When i test the site in Firefox, it doesn't detect the $_REQUEST['sort'] variable and therefore the if condition evaluates to false and the search results don't get sorted.
Apparently at some point in the HTML5 standard development somebody decided that the actual value of input type="image" is unimportant, and they decided to just not require browsers to submit it in any way: link to specification.
Unfortunately, it seems not only Firefox sticks strictly to the specification. A comment to a bug submitted to the Firefox developers states that this behavior is also observed in Opera and Internet Explorer.
So, you can test if the image has been clicked by inspecting the .x/.y coordinates submitted with the form, but you cannot determine which of the two images has been clicked, because you don't reliably receive its value across different browsers, and browsers that still pass the value will likely also follow the spec and drop it at some point in the future. You will need to name the two buttons differently.
Actually Firefox will only send the coordinates of the click. If you want to use input type="image" you can use:
<input type="submit" name="sort" value="desc"><img src="..." /></input>
and
<input type="submit" name="sort" value="asc"><img src="..." /></input>
or you can use css to input type="submit". input type="image" is equivalent to giving background image to button, so use that instead.
If you have multiple input controls with same name in form , they will appears as array in PHP not as single value.
What does
var_dump($_POST)
or
var_dump($_REQUEST)
show?
Related
so I have been building a small website with a content management system I have built using PHP and mysql. What I am trying to achieve is the user needs to be able to edit and delete the announcement posts they make, so I have been using $_GET to get the ID of the post that is to be edited/ deleted and chucked into a form which holds the code to do that.
Now, this is the code I have been using
if(isset($_GET['edit'])) {
header('Location: announcement-edit.php?AnnouncementID='.$_GET['AnnouncementID']);
}
The form later down the page to execute this is as follows
<form action="announcements.php" method="get">
<input type="hidden" name="AnnouncementID" value="<?php echo $row['AnnouncementID'];?>" />
<input name="edit" value="Modify" type="submit">
<input name="delete" value="Delete" type="submit" >
</form>
This is where it confuses me, this code worked absolutely perfectly then all of a sudden last week it stopped, 2 days ago it started working again and now broken again. When the button is clicked the URL returns as;
url/folder/announcements.php?AnnouncementID=7&edit=Modify
When its supposed to return;
url/folder/announcement-edit.php?AnnouncementID=7
If i manually type the above in the url bar it works absolutely fine and I can update the rows in the DB.
Im totally stumped as to why it is so temperamental, Have I missed something out? am I trying to do this an out dated way?
Its not like I have just followed a random person on youtube how to do this I was actually shown this way at university (only last academic year) and we was told it was "good practice". Seems very weird it works perfectly one minute then refuses to work the next.
Any thoughts or suggestions will be greatly appreciated.
You have two submit buttons in your form, which leads to triggering the submit event only once, when you press Enter key. So, when the Delete button is pressed, your GET parameters will have only delete entry and not the edit entry.
One way of tackling this is, give the same name to both and give a different value, as already there is a different value.
<form action="announcements.php" method="get">
<input type="hidden" name="AnnouncementID" value="<?php echo $row['AnnouncementID'];?>" />
<input name="action" value="Modify" type="submit" />
<input name="action" value="Delete" type="submit" />
</form>
You dont need to use form. You can do it simply using url and use tag
Try to pass your parametr via get parametr like this:
Edit
Delete
first things first, english isn't my native language, so feel free to ask if I am being unclear.
I am currently trying to get a small webpage to work for a college task (and no, I'm not asking you to do my homework, but I currently am stuck and no amount of search has turned up valuable results so far) and it seems like my submit buttons only submit their own values and nothing else.
For example:
I have a form called "list" that has a select element, two buttons and one submit element.
Code:
<form id="list" action="process.php" method="post" onsubmit="return order()">
<select name="cart[]" id="myCart" size="6" multiple>
[contents of select element]
</select>
<p>
<input type="button" value="Delete All" class="custombuttonsmall" onclick="deleteElements()">
<input type="button" value="Delete Selected" class="custombuttonsmall" onclick="deleteElement()">
<input type="submit" value="Order" class="custombuttonsmall" name="order">
</p>
</form>
Note: the "order()" function checks if there are options in the select element. If there isn't, the process won't come through.
process.php currently only has two lines,
$q = $_POST;
var_dump($q);
to test if submitting works.
Result of var_dump:
array(1) { ["order"]=> string(5) "Order" }
Every other value I'm trying to call (e.g. $q = $_POST['cart']) returns NULL. Basically, my submit button seems to only submit its own value instead of the whole form. And I can't seem to figure out why. It happens for every form I'm trying t submit.
Sorry if this has been asked before or is too specific, but again, I haven't been able to get any progress on this so far.
Thanks in advance,
//EDIT:
Browsers used are Chromium 34.0.x and Firefox 30.0, same results on both.
Only selected options in a select element will be submitted.
Based on your bytton values, it seems likely that you are dynamically adding and removing options (without actually selecting them) instead of using the browser's native multiple selection UI.
When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked, it works perfectly in FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.
It's not about sending any random object, but sending a pair as input_name=input_value. The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"
What can I do to fix this problem?
Per the HTML spec, clicking on an IMAGE input will return the parameters:
name.x=x-value and name.y=y-value where "name" is the value of the name attribute
with x-value and y-value corresponding to the click position.
Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:
/^(.*)\.[xy]$/
to search for the IMAGE input keys to determine which IMAGE was clicked.
I tried with this sample:
<form action="#" method="GET">
<input type="text" name="t" value="Text here"><br>
<input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br>
<input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</form>
And I get the following urls:
FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
IE 8: x.html?t=Text+here&b.x=22&b.y=18
IE 7: x.html?t=Text+here&a.x=185&a.y=51
Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#
So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.
The problem was half solved up to now: like here
But it didn't allow to get the value!
The correct answer is:
$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){
$(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />');
});
This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.
I recommend putting it in $(document).ready();
I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9.
My work around was to put each image in its own form and then also use a hidden input to send the needed data.
<table>
<tr>
<td>
<form method="post" class="form_photo">
<input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
<input type="hidden" name="photo" value="nameoftheimage.jpg" />
</form>
<form method="post" class="form_photo">
<input ...>
<input ...>
</form>
<form> ...
</td>
</tr>
Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.
.form_photo { display:inline; }
seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.
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 you images so long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
According to a PHP script of mine, Google Chrome is sending an empty (e.g. no value="") input field with a form post. This is reflected in $_POST superglobal in PHP. However, other browsers are not exhibiting this same behavior.
Furthermore, the <input> in question is inside of a <div style="display: none;"/> (that is verbatim in the code). It seems as if other browsers don't send this along.
How/where do I find documentation or proof that Chrome handles this differently?
Update
It turns out that the div has a css style applied to it which applies visibility: hidden; - I'm not sure if this alters the answers below or not.
See here for actual code:
From the form-handler:
$check = stripslashes($form['E-mail']);
if (!empty($check)) {
$problem = false;
$errors[] = '0|wrong spamcheck code!';
}
From the form:
<td><div style="visibility:hidden; display:none"> <input type="text" name="E-mail" ></div></td>
I can confirm that both Firefox and Safari exhibit this behaviour too.
<?php
var_dump($_POST);
?>
<form method="post">
<input type="hidden" name="hiddenField" />
<input type="submit" />
</form>
The results of this are:
array(1) {
["hiddenField"]=>
string(0) ""
}
Also tested inside a hidden div, and with value="", result was the same. Should also point out, I don't think closing a div with /> is actually allowed according to standards, seems like bad practice to me regardless (since you state it is verbatim).
Edit: Out of my own curiosity, I have now also tried it without type="hidden" (type attribute removed completely, simple <div style="display:none"><input name="hiddenField" /></div>) and placing it inside a div with display: none. Results remained consistant in Firefox and Safari.
I have found the solution - it turns out that in Chrome, it populates this form field with your auto-complete email address. A var-dump of the results of the form submission confirmed.
Thanks so much to those who looked into this - it led me down the path to solution. Votes up for all!
The problem I have is that I have multiple submit inputs in a single form. Each of these submit inputs has a different value and I would prefer to keep them as submit.
Whenever the user presses Enter, it is as though the topmost submit input is being pressed, and so it is causing problems for the code checking which input was clicked.
Is there a way for PHP to determine whether or not the input was clicked, or was just the input that was selected when the user pressed the Enter key?
You can identify which button was used provided you structure your HTML correctly
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Preview">
<input type="submit" name="action" value="Post">
The $_POST array (or $_GET/$_REQUEST) will contain the key "action" with the value of the enacted button (whether clicked or not).
Now, "clicking" is explicitly a client-side behavior - if you want to differentiate between a click and a keypress, you'll need to add some scripting to your form to aid in that determination.
Edit
Alternatively, you can be "sneaky" and use a hidden submit that should correctly identify a key-pressed for submission, but this probably has some significant impact on accessibility.
<?php
if ( 'POST' == $_SERVER['REQUEST_METHOD'] )
{
echo '<pre>';
print_r( $_POST );
echo '</pre>';
}
?>
<form method="post">
<input type="text" name="test" value="Hello World">
<input type="submit" name="action" value="None" style="display: none">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Preview">
<input type="submit" name="action" value="Post">
</form>
Roberto,
PHP is server-side technology and therefore runs on the server - so there is no way for it to determine what keys where pressed at the client (aka the user). That is, of course, unless you specifically code the client-side to include such information with the server requests (posting form data is a form of request too).
One way to accomplish that is by using Javascript in your client code.
See this page as a starting point regarding handling form submit events using Javascript.
http://www.w3schools.com/jsref/jsref_onSubmit.asp
You may also have to add a listener for key press events on your page in order to capture the user pressing the Enter key and then recording this information.
http://www.howtocreate.co.uk/tutorials/javascript/domevents offers a discussion on the topic of adding/removing event listeners in Javascript but you have to be very careful when using events because improperly used they can be the source of memory leaks which are hard to debug and cause for unhappy users :)
PHP alone can't determine how the form submit event was triggered, because that happens on the client-side while PHP is a server-side language. You'd have to implement Javascript to listen for -- and log to the server-side -- key presses and mouse clicks, and then analyze that data to find what you're looking for.
Now, PHP can tell which submit input was triggered, as it will appear in the form data while the others will not. Most browsers make the first submit input the default (the one that is triggered on an Enter key press). You could re-order all your submits so as to control which submit is triggered.
PHP can't really know what happened on the client side.
I'd recommend using javascript. When the user do the action, catch it and store it in an hidden field that will be submited with the form. You can also keep track of what input is active and store it in an hidden field.
The code would go a bit like that (i didnt checked the syntax)
<input type="text" onfocus="setCurrent(this)" id="1" />
<input type="hidden" id="hid" />
function setCurrent(o){
$('hid').value = o.id;
}
I think that playing around with events catching and hidden fields should give you the result that you want.
Hope that helps
It's how you write the markup on the client side.
For example, here is one (non-XHTML) way you could do this:
In the HTML file:
<form method="post" action="myform.php" id="myform">
... form items here ...
<input type="submit" name="enter_key" value="true" style="display:none">
<input type="hidden" name="pressed_button" id="pressed_button" value="false">
<input type="button" value="Submit"
onclick="document.getElementById('pressed_button').value='true';document.getElementById('myform').submit();">
</form>
In myform.php:
if ($_POST['pressed_button']=='false') {
// Logic for enter key
} else {
// Logic for button press
}