Form Submission Via Image Click

Abstract:

This rather short article is targetted at explaining a simple trick that novice HTML and JavaScript coders can use: "How can an image click submit a form?"

The Problem:

Let's first discuss why one will want to do that. We surely use HTML forms at a lot of places. The forms are usually submitted by clicking a submit button; such a button is created with <input type="submit" value="Login">. This will create a button as shown below. Now how can one use an image instead of this ugly button? The solution is very important because sometimes it simply destroys the nice interface of a page.

The Solution:

An image is created with <img src=...> tag. But it is not clickable unless it refers to a link. Thus an image that doesn't take you anywhere when you click can be made by:

Now this image is clickable. But can it submit a form? Yes, you can use the onClick() event of the anchor. An example will clear up the things:

<form name="imageForm" method="post" action="some.cgi">
<input type="text" name="name" size="20">
</form>

<a href="#" onClick="imageForm.submit()">
   <img src="some.gif" border="0">
</a>

Last Words:

Any questions? Feel free to ask in the discussion area.

Go To Page: 1