Image as a Submit/Reset Button

JunkMailMan

unread,

Dec 10, 2000, 12:55:14 AM12/10/00

to

How could I use an image as a Submit or Reset button for a form? Is there
something I could put in one of these type tags:

...or anything else that might work would be appreciated. Please email me at
junkm...@mac.com

Thank you.

Michael MacMillan

unread,

Dec 10, 2000, 2:09:10 AM12/10/00

to

For the submit button and reset buttons i use:
<input type="image" src="submit.gif">
<input type="image" src="reset.gif" onclick="clearForm();">

where clearForm is a function i use to reset the form:
function clearForm() {
for(i=0;i<document.forms[0].elements.length;i++) {
document.forms[0].elements[i].value = "";
}
}

hope this helps...

--
Mike MacMillan
iri...@home.com

"JunkMailMan" <JunkM...@mac.com> wrote in message
news:B6585A27.22CF%JunkM...@mac.com...

JunkMailMan

unread,

Dec 10, 2000, 3:20:39 AM12/10/00

to

> How could I use an image as a Submit or Reset button for a form? Is there
> something I could put in one of these type tags:
>
> <a href="#" onclick="XXXX"><img src="image.jpg"></a>
>
> <input type="image" src="image.jpg">
>
> <input type="submit" name="Submit" src="image.jpg">

OK, I figured this out. First I tried this:
<input type="image" src="image.jpg" border=0 width="x" height="x"

...but that screwed up my rollovers. So then I tried this (someone said it
was dangerous...why?) and it worked:
<a href="javascript:document.myform.submit()"><img src="submit.gif"></a>
<a href="javascript:document.myform.reset()"><img src="reset.gif"></a>

So I'm done with that part of it, now my question is how can I make this
button into an image:
<input type=button value="Ok"
onclick="parent.passTextArea(this.form.fieldname.options[this.form.fieldname
.selectedIndex].value);">

I tried this and I'm not sure why it doesn't work
<a
href="javascript:parent.passTextArea(this.form.apps.options[this.form.apps.s
electedIndex].value);"><img src="images.jpg"></a>

(sorry for the choppy code)

I'm not sure why I can't just go like this and put any javascript function
in as a href:
<a href="javascript:aaaa.bbbb(cccc);"><img src="image.jpg"></a>

Can someone please explain to me how this type of thing works (the
javascript in href), and how I can make this work?

Thank you.

Isofarro

unread,

Dec 10, 2000, 6:13:39 AM12/10/00

to

On Sun, 10 Dec 2000 08:20:39 GMT, JunkMailMan <JunkM...@mac.com>
wrote:

> So then I tried this (someone said it was dangerous...why?) and it worked:
><a href="javascript:document.myform.submit()"><img src="submit.gif"></a>

javascript: protocol in an href is not supported by every browser
available - it normally stuffs up when you least expect it.

The safer/reliable form is:
<a href="nojsdoc.html" onClick="document.myform.submit(); return
false;"><img src="submit.gif" alt="Submit this Form"></a>

Now when javascript is disabled (like when a js error appears and the
user then switches off javascript for that page) then at least there's
an html fallback. Its called graceful degradation.

Now in your case there isn't an html fallback. So it makes sense to
get javascript to write out the link, so if javascript is unavailable
then the user won't see broken links:

Iso.
--
alt.html QuickStart: http://rock13.com/webhelp/usenet/newbie.txt
HTML FAQ: http://www.htmlhelp.com/faq/html/
WebDesign FAQ: http://www.vortex-webdesign.com/help/faq.htm
Jukka's Usenet guide: http://www.hut.fi/u/jkorpela/usenet/
Recommended Hosting: http://www.affordablehost.com

Jukka Korpela

unread,

Dec 10, 2000, 8:39:31 AM12/10/00

to

JunkMailMan <JunkM...@mac.com> wrote:

>How could I use an image as a Submit or Reset button for a form? Is there
>something I could put in one of these type tags:
>
><a href="#" onclick="XXXX"><img src="image.jpg"></a>
>
><input type="image" src="image.jpg">
>
><input type="submit" name="Submit" src="image.jpg">
>
>...or anything else that might work would be appreciated.

I have quoted the entire question, since due to heavy crossposting, the
original message might get filtered out on several servers, due to
anti-spam measures. I've reduced the number of groups by removing groups
where the question is clearly off-topic, and limited followups to one
group only.

The question is answered in detail in the Web Authoring FAQ:
http://www.htmlhelp.com/faq/html/forms.html#custom-button

See also http://www.hut.fi/u/jkorpela/forms/imagebutton.html for info on
image buttons.

Briefly, a reset button of any kind is almost always just a nuisance, see
http://www.useit.com/alertbox/20000416.html
and for a submit button, if you'd really like to use an image submit
button after considering all the drawbacks, the best approach is
<input type="image" src="image.gif" name="Submit" value="Submit"
alt="Submit" border="0">
(It _could_ be a .jpg image too, but generally .jpg format is not very
suitable for images that you'd typically use for a button.)
--
Yucca, http://www.hut.fi/u/jkorpela/
Qui nescit tacere nescit et loqui

JunkMailMan

unread,

Dec 11, 2000, 3:15:28 AM12/11/00

to

Thank you very much with all you help on the images as submit buttons but no
one answer my question about this:

> So I'm done with that part of it, now my question is how can I make this
> button into an image:
> <input type=button value="Ok"
> onclick="parent.passTextArea(this.form.fieldname.options[this.form.fieldname
> .selectedIndex].value);">
>
> I tried this and I'm not sure why it doesn't work
> <a
> href="javascript:parent.passTextArea(this.form.apps.options[this.form.apps.s
> electedIndex].value);"><img src="images.jpg"></a>

Note: this was not an actual submit button..it was just a button with the
above command attached to it...all I want to do is attach that command to a
gif so that when it is click the command is performed (and I have rollovers
so I would like to keep those too).

Here is what I have tried:

or like this:

<a href="nojavascript.html"

onclick="parent.passTextArea(this.form.fieldname.options[this.form.fieldname
.selectedIndex].value);">

or like this:

I think I've tried all of these but they don't seem to work and I have no
idea why. Similar things like this work, why doesn't this one?

BTW- If you need to know the rest of the code it is from
http://javascript.internet.com/forms/pass-textbox-frames.html