Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt

Related items

Chapter 6: Beginning JavaScript

Controlling Data Entry Using Form Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Passing data from one form to another

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons

Form Image Button Fields

You are here: irt.org | Articles | JavaScript | Form | Form Image Button Fields [ previous next ]

Published on: Sunday 26th September 1999 By: Rafal Koszyk

Introduction

So you want to use nice gifs instead of those ugly looking gray buttons to submit and reset your form? No Problem - just use form type=image. Or is there more to it than that?

This short article describes how to use the forms image input type to create a submit button (default) and a JavaScript solution for a reset button.

First the HTML for a simple form:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="submit">
<input type="reset">
</form>

Which looks like:


If we want to replace the default button text, then you can specify a value for each button:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>

The form now looks like:


To actually replace the grey buttons with our own images, then we have two options: we either use a different form field type, namely "image", or we use normal image links.

Form Image Type

The following show how to add image type form fields:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif">
<input type="image" src="reset.gif">
</form>

The form now looks like:


Note, we have used our own simple images submit.gif and reset.gif as the image sources. The images can be as plain or gratuitious as you feel capable of getting away with.

To remove the blue borders add a border attribute with a value of zero:

<form action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif" border="0">
<input type="image" src="reset.gif" border="0">
</form>

If you press the submit image then the form is submitted. However, if you press the reset image the form is also submitted. This is because the default action of an image form type is to submit the form.

To use an image to reset a form you have to use a normal image link...

Image Link

An image link is simple an image wrapped up in link tag:

<form name="formName" action="example.cgi" method="post">
<input type="text" name="login">
<br>
<input type="image" src="submit.gif" border="0">
<a href="javascript:document.formName.reset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

To allow the image to reset the form we use the JavaScript URL schema to invoke the reset method of the appropriate form.


Reset

onSubmit and onReset Event Handlers

The only problem with the previous use of image links is that invoking either the reset or submit method directly bypasses the forms onReset and onSubmit event handlers, as the following example demonstrates:

<script language="JavaScript"><!--
function mySubmit() {
    if (document.formName.login.value == '') {
        alert('You must enter a value');
        return false;
    }
    else {
        alert('Submitting');
        return true;
    }
}

function myReset() {
    alert('Resetting');
}
//--></script>

<form name="formName" action="example.cgi" onClick="return mySubmit()" onClick="myReset()" method="post">
<input type="text" name="login">
<br>
<a href="javascript:document.formName.submit()"><img src="submit.gif" border=0 alt="Submit"></a>
<a href="javascript:document.formName.reset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

Submit Reset

The form can be incorrectly submitted with an empty form field.

To get around this we can invoke the onSumbit() and onReset() functions directly, by using the image links onClick event handler, which is always called by carrying out the required link navigation:

<script language="JavaScript"><!--
function mySubmit() {
    if (document.formName.login.value == '') {
        alert('You must enter a value');
        return false;
    }
    else {
        alert('Submitting');
        return true;
    }
}

function myReset() {
    alert('Resetting');
}
//--></script>

<form name="formName" action="example.cgi" method="post">
<input type="text" name="login">
<br>
<a href="javascript:document.formName.submit()" onClick="return mySubmit()"><img src="submit.gif" border=0 alt="Submit"></a>
<a href="javascript:document.formName.reset()" onClick="myReset()"><img src="reset.gif" border=0 alt="Reset"></a>
</form>

As you can see if the function mySubmit() returns false, the false value effectively cancels the link navigation, i.e. the forms submit method is never invoked - it is cancelled.


Submit Reset

CGI script

Finally, a copy of the CGI script used to process the forms in this article:

#!/usr/local/bin/perl

print 'Content-type:text/html' . "\n\n";

read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

@pairs = split(/&/, $buffer);

foreach $pair (@pairs) {
  ($name, $value) = split(/=/, $pair);
  $value =~ tr/+/ /;
  $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
  $FORM{$name} = $value;
}

print '<html><head><title>Form Output</title></head><body>';
print '<h2>Results from FORM post</h2>';

foreach $key (keys(%FORM)) {
  print $key . ' = ' . $FORM{$key} . '<br>';
}

print "</body></html>";

Related items

Chapter 6: Beginning JavaScript

Controlling Data Entry Using Form Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Passing data from one form to another

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons

Feedback on 'Form Image Button Fields'

View the profile on Rafal Koszyk and the list of other Articles by Rafal Koszyk.

©2013 Martin Webb