Page 1 of 1

Change submit button to image in form

Posted: Mon Apr 23, 2007 6:42 am
by SmokyBarnable
I have a form that works fine using the submit button but I wanted to change the submit button to an image.

This works fine.

Code: Select all

array ('value' => "<form action='orders.php' method='post' name='delete' id='delete'>
		     <input type='hidden' name='id' id='id' value='".$order_values['order_id']."'>
		     <input name='delete' type='submit' id='delete' value='End Item' ></form>"),
When I change the type to 'image' the submit button is replaced by the image but it stops working...it doesn't post the id value anymore?

Code: Select all

array ('value' => "<form action='orders.php' method='post' name='delete' id='delete'>
		     <input type='hidden' name='id' id='id' value='".$order_values['order_id']."'>
		     <input name='delete' type='image' src='images/icons/delete.gif'  alt='Delete Order'  id='delete' ></form>"),

Posted: Mon Apr 23, 2007 6:53 am
by mentor
degub the posted values by

Code: Select all

echo "<pre>";
print_r($_POST);
Here you will see image name as delete_x and delete_y.

Posted: Mon Apr 23, 2007 6:54 am
by aceconcepts
Hi,

Try:

Code: Select all

<input name="submit" type="submit" src="path/image.gif" />
As the type is "submit" your form data will be posted and "src" will allow you to override the default button.

Posted: Mon Apr 23, 2007 7:15 am
by SmokyBarnable
I changed

Code: Select all

if(isset($_POST['delete'])){
to

Code: Select all

if(isset($_POST['delete_x'])){
and it works! I'm not sure I understand why though. Is it because by changing the submit button to an image it adds image map info?


Thanks.

Posted: Mon Apr 23, 2007 8:26 am
by superdezign
Without changing the element name of the image? That's strange, and doesn't sound like it actually works to me.

And when I make image buttons, I actually just create an image with an onclick of "document.formName.submit()." In regards to accessibility, I have an actual button underneath the image, and I generate the image code using javascript. Then, I use javascript to hide the button and (optionally) alter it's position to be in the same place as the image (the best way to do so is to put them into a block element together, and position them both to be in the same absolute position within the element).

I've found it to be a very effective method... You know, if you like javascript. :)

Posted: Mon Apr 23, 2007 12:30 pm
by Burrito
I would go a javascript route as well. the reason it's now coming across as name_x is that image elements send the x and y coordinates of the image when posted...that's standard HTML, nothing to do with php.

Posted: Tue Apr 24, 2007 12:03 am
by Kieran Huggins
javascript route is the way to go here - the ninja space goat asked this question a few months ago and we had quite a discussion on it then:

viewtopic.php?t=62827