Using an Image Instead of a Reset Button

I'll show you how to use an image for the same functionality as a reset button.

The reset button remains in the form, but un-displayed. The image, when clicked, calls the reset button's click() function.

Working form with reset button:

Working form with image instead of reset button:

a   b   c

How To Use an Image Instead of a Reset Button

First, make your form with the reset button. Ensure it works.

For demonstration purposes, let's assume your reset button looks like this:

<input type="reset">

To implement the feature:

1. Modify the reset button.

2. Insert an image to use instead of the reset button.

3. Insert an onclick attribute into the image tag.

1. Modify the reset button.

The reset button needs an id value and a CSS definition display:none;

The above example modified may look like this:

<input type="reset" id="resetbuttonid" style="display:none;">

The id value assigned to the reset button will be used in the image tag's onclick attribute (see further below).

The CSS definition display:none; un-displays the reset button. The reset button code is still there, and live, it's just not visible.

Insert the image to be clicked instead of the reset button. The image tag can be anywhere on the page. Consider putting it immediately before or after the un-displayed reset button source code.

Here is an example image tag (the same image used in the above working form):

<img 
   src="//www.willmaster.com/images/redo.jpg" 
   width="50" 
   height="46" 
   alt="reset the form" 
   title="Click to reset the form.">

An onclick attribute needs to be inserted into the image img tag. Here is the format:

onclick="document.getElementById('IDHERE').click()"

Replace "IDHERE" with the id of the reset button. In the above example reset button code, the id is "resetbuttonid". Thus:

onclick="document.getElementById('resetbuttonid').click()"

Here is the above image img tag with the onclick attribute inserted:

<img 
   onclick="document.getElementById('resetbuttonid').click()" 
   src="//www.willmaster.com/images/redo.jpg" 
   width="50" 
   height="46" 
   alt="reset the form" 
   title="Click to reset the form.">

You Are Good To Go

With the above steps in place, clicking the image will do what the reset would have done. It has the same functionality.

Will Bontrager