use image as submit Button

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: use image as submit Button

Post by AbraCadaver »

[text]<input type="image" src="path/to/anyimage.jpg" name="submit" alt="submit" />[/text]
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: use image as submit Button

Post by JakeJ »

**WARNING** Internet explorer will not pass the value of an image so you cannot test for:

Code: Select all

If (isset($_POST['submit'])) { 
    //do something
} 
if the form was submitted with IE.

I use the following method:

Code: Select all

<input type="image" src="path/to/anyimage.jpg" name="button1" alt="submit"  value="button1" onclick="document.getElementById('submit').value=this.value"/>
<input type="hidden" name="submit" value="" />
The above method also allows you to use multiple submit buttons on one page since you can then test for the button value to see which button is pushed.
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: use image as submit Button

Post by AbraCadaver »

You're correct in that IE doesn't pass the name, but all browsers should pass the name with _x and _y appended and the coordinates of where the image was clicked. Below is the input and what is sent by Firefox and IE:

[text]<input type="image" src="some_image.jpg" name="submit">[/text]
Firefox
[text]Array
(
[submit_x] => 0
[submit_y] => 0
[submit] => submit
)[/text]
IE
[text]Array
(
[submit_x] => 0
[submit_y] => 0
)[/text]
So you can use an isset() on name_x.
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: use image as submit Button

Post by JakeJ »

How would that work with multiple submit buttons?

Let's say I have a form with 10 buttons but i don't know what the names of them are going to be ahead of time or how many there will be.

On dynamically generated forms, what I do is to append a number to the end of the name for all of my fields. The button name has the same number appended. So then in my action code, I strip out the number from the button name and use that to refer to the field names for processing.

I suppose I could still do the same with the x/y method and just strip off the x also.
Festy
Forum Commoner
Posts: 28
Joined: Wed Jan 30, 2008 10:01 pm

Re: use image as submit Button

Post by Festy »

You can also javascript (document.form.submit) to submit your form. Just use 'onclick' event in the input type image.
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: use image as submit Button

Post by JakeJ »

If you're going to use javascript to submit the form, you might as well go all the way and use jQuery and the forms plug in. It will handle everything for you.
Post Reply