Page 1 of 1

Re: use image as submit Button

Posted: Mon Aug 02, 2010 2:00 pm
by AbraCadaver
[text]<input type="image" src="path/to/anyimage.jpg" name="submit" alt="submit" />[/text]

Re: use image as submit Button

Posted: Mon Aug 02, 2010 10:06 pm
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.

Re: use image as submit Button

Posted: Mon Aug 09, 2010 10:34 am
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.

Re: use image as submit Button

Posted: Mon Aug 09, 2010 3:09 pm
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.

Re: use image as submit Button

Posted: Wed Aug 11, 2010 2:00 am
by Festy
You can also javascript (document.form.submit) to submit your form. Just use 'onclick' event in the input type image.

Re: use image as submit Button

Posted: Wed Aug 11, 2010 5:19 am
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.