Closed Thread Icon

Topic awaiting preservation: Using an image as a form reset button Pages that link to <a href="https://ozoneasylum.com/backlink?for=12600" title="Pages that link to Topic awaiting preservation: Using an image as a form reset button" rel="nofollow" >Topic awaiting preservation: Using an image as a form reset button\

 
Author Thread
Nocturne
Nervous Wreck (II) Inmate

From: Netherworld
Insane since: Dec 2000

posted posted 01-31-2003 17:19

I have a form where I've set the submit button to an image using the <input type="image"> tag.

This only seems to work with the submit button.
How could I set an image to work as the reset button of a form?
Is it possible in plain html?

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 01-31-2003 17:36

Nocturne: I always try to avoid being absolute in my answers (as it is an easy way for people to come along and prove you wrong - usually within a few minutes) but that isn't possible. I think this came up a while ago.

What you can do is set up and image and have a bit of JavaScript on it to reset all the values in the form to '' onclick.

Someone should be along in aminute to prove me wrong

___________________
Emps

FAQs: Emperor

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 01-31-2003 18:01

lol

Alright so I did what I normally do when I don't know the answer and checked google.

Seems answer number 2 was this

Which led me here



.:[ Never resist a perfect moment ]:.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 01-31-2003 19:09

bd: Now isn't that something

Actually going for this at Google:
www.google.com/search?q=Reset+Form+button+image

brings up the FAQ at number 5

___________________
Emps

FAQs: Emperor

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 01-31-2003 20:10

Two possibilities:

1. Using CSS on the standard Reset button, like

<input value="" type="reset" style="background-image: url(http://www.OzoneAsylum.com/images/ASYLUM44b.jpg); border: 0; width: 300px; height: 90px; background-color: transparent;" />

This works as expected in IE, but doesn't in Mozilla. It just displays a blank gray button (which the correct width and height though).

2. Using JavaScript and the image's onclick event to reset the form (kinda like Emps suggested):

<img src="http://www.OzoneAsylum.com/images/ASYLUM44b.jpg" onclick="document.forms[0].reset();" />

Works beautifully in both IE and Mozilla

[This message has been edited by kuckus (edited 01-31-2003).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 01-31-2003 20:31

kuckus: No need to apologise [edit: unless you've done something I missed ] that has helped nail a few things down. I have lifted your solution and updated the FAQ:

:FAQ:

Good show

___________________
Emps

FAQs: Emperor

« BackwardsOnwards »

Show Forum Drop Down Menu