Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Form Image Button Fields [ previous next ]
Published on: Sunday 26th September 1999 By: Rafal Koszyk
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.
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...
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.
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>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.
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>";Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2