Image Submit Buttons

Sooner or later, you'll get really tired of the standard

You'll want to use your own graphics so the buttons will match your site's overall color scheme. Look at this example. HTML gives us only one way to use an image as a button, and that's only as a "submit" button. Here's the code for one:

<input type="image" src="URL to image file">

Buttons made like the above can use any image, but will only submit a form. To use your own custom buttons for custom effects, you'll have to use JavaScript.

Using Image Links

The first key behind making and using custom effects is to use image links instead of <input> buttons. They work just like any other image link leading to a JavaScript. Here's a sample from one of the "help" buttons in the example.

<a href="javascript:showhelp('name')">
<img src="helpbutton.png" border=0></a>

The above is nothing more than an image link like you learned to make in beginning HTML. It leads to a JavaScript that pops up a help box (pop up menu).

Lets look at how we can use an image link to submit our button instead of the usual <input type="image"...>

<a href="javascript:document.form_name.submit()">
<img src="submitbutton.gif" border=0></a>

It's the "submit()" method that does the trick. The above has the same effect as clicking an <input type="submit"...> or <input type="image" ...> button. It will run the ACTION in the <form> tag.

We can use the "document.form_name.reset()" method to reset the whole form. Note that the "reset()" method only works for whole forms, not individual form fields. Here's how I coded my reset button in the example:

<a href="javascript:document.form1.reset();document.form1.namebox.focus()">
<img src="resetformbutton.png" border=0></a>

Notice that the above has two lines of code. The first resets the whole form. The second puts the cursor (focus()) in the first box for a quick and easy new start.

False Buttons

Not all buttons are what they appear to be. This is especially true of "Reset" buttons. These buttons will often be coded to actually submit the data you want cleared before clearing it.

These false reset buttons are actually submit buttons. The data is sent and the backend program (Perl, PHP, ASP) reloads the form page so make it appear to be reset.

Another scheme is to put a quick JavaScript cookie on the viewers drive holding the data they wanted cleared and reading this cookie into a database (with a backend program) when they leave your site.

This is done to get whatever scraps of marketing data you can get. Someone might fill out half your form and change their minds about the transaction. You can run the false submit when they unload the form's page ("onUnload") or on clicking a fake reset button.

The fact is that once something is typed into a form, that data can be gathered by one method or another. Even if the viewer selects and deletes the data. With a little thought, I'll bet you can code the needed JavaScript events to trap data the viewer tries to clear without their knowing. Events like "onChange", "onFocus", and "onBlur" become important here.

Individual Field Settings

In the example, I include buttons (image links) that will clear individual fields. You do not use the "reset()" method to clear an individual field. The "reset()" method only works on whole forms.

All the individual field reset buttons for the textboxes do is to run a couple of lines of code to set the box's value to nothing ("") and focus() the box. I used the following program for both boxes. The name of the individual box is returned as a parameter.

function redofield(whatbox){
document.form1[whatbox].value = "";
document.form1[whatbox].focus();
}

The radio buttons are cleared a little differently. Remember that they are an array. I named the radio buttons "gender", so they are "gender[0]" and "gender[1]". I set their "checked" property to Boolean false:

function redogender(){
document.form1.gender[0].checked = false;
document.form1.gender[1].checked = false;
}

You'll notice that since I only had two radio buttons, so I didn't use a FOR loop to set all of the "checked" values to false. I just used a line each. You'd want to loop through longer arrays of buttons and checkboxes with a FOR loop to reset (uncheck) them. Also, if you had a default checked, you'd want to recheck that default after the loop ran by using:

document.form_name.box_group_name[default_option_number].checked = true;

Below is a sample function that will loop through an array of checkboxes (called "boxes") and clear all of the checked boxes. It will then check the first box as a default:

function reset_boxes(){
for (i = 0; i < document.form_name.boxes.length; i++){

document.form_name.boxes.options[i].checked = false;
}//ends clearing loop

document.form_name.boxes.options[0].checked = true;
}

Help Menus

The help menus in the example are nothing more than styled <div> pop up menus. They look differently in Netscape and IE, but I liked the difference and was too lazy to fix it. The background color and borders are ignored by Netscape because there's a "nested <div>" inside the main box. It centers the "close" link in IE.

Remember that nesting <div>s causes all sorts of havoc in Netscape. Try using a table to format the content inside a <div> to get around this.

Summary & Exercises

You can use image links as a more attractive and functional alternative to <input> buttons.

JavaScript makes coding a submit and reset button easy -- document.form_name.submit() and document.form_name.reset() .

Buttons are not always what they appear to be. They are often intentionally mislabeled and lead to data gathering programs. This is especially true of "reset" buttons.

Other JavaScript events can be used to trap data the viewer wants deleted or reset. The most useful of these are "onChange", "onUnload", "onFocus", and "onBlur".

Individual fields can be cleared and focused by setting their value to nothing or setting their "checked" property to Boolean false. Focus can be set with the "focus()" method.

Make a form with a couple of fields that have individual field reset buttons. Make all of the buttons image links leading to JavaScript programs. Making some help pop ups is a good review.

If you don't have any buttons available here's the set I used in making the example.

To Advanced JavaScript Form Exam

Back To Advanced JavaScript Index