Solved

How do I use images in forms?

Posted on 1997-11-15
4
164 Views
Last Modified: 2012-05-04
How do I use images for the submit and reset buttons in forms and provide the same functionality?
0
Comment
Question by:balloomc
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1273979
use <INPUT TYPE="IMAGE">
Do not name any other element of that form "x" or "y", as in these variables the coordinates of the mouseclick are stored.
You might alternatively try:
<A HREF="#" onClick="document.forms.submit()"><IMG SRC=".."></A>
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1273980
whoops - almost forgot:
it's <INPUT TYPE="IMAGE" SRC="image.gif">
sorry...

I'd suggest that you remove your other question, which is basically the same!
0
 

Author Comment

by:balloomc
ID: 1273981
This still doesn't answer my question about how to add functionality.  Basically, if I include an Input Type="Image" and provide the src for it, that still doesn't tell me what to do so that the form image knows whether to submit or reset.  The second alternative didn't even work!
0
 
LVL 6

Accepted Solution

by:
alamo earned 100 total points
ID: 1273982
Christian's second syntax is correct, assuming it's inside a form - e.g. the following will work as an image submit button...

<form action="whatever" method="GET">
<input type=image src="image.gif">
</form>

How does it know it's a submit? Because that's the *only* possibility - you *can't* use an image for a reset button. The image-as-submit is there for imagemaps (it sends the x and y coordinates of the image click along with the form values).

There is a javascript-based workaround - put an image in as a normal link and use the onClick event to manually clear the form values. This only works in NS3+ (because before then you couldn't cancel the activation of the link, clicking the image would send you off to another page). So for NS3+ and IE3+ with javascript enabled, the following form will have a reset image. All other browsers won't have any reset at all.

<form name="frm" method="GET" action="action.pl">
<input type=text name="txt">
<input  type=image src="submitimage.gif" border=0>
<script language="JavaScript1.1">
document.write('<a href="" onClick=\'document.frm.txt.value=""; return false;\'><IMG SRC="resetimage.gif" border=0></a>');
</script>
</form>

I know this isn't exactly what you wanted, but the standard answer you will get about using an image for a reset button is "Can't do it, period" so this is a real improvement :-) Leave a comment if I am unclear about any of this. Good luck!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now