Form Tricks
You are here: irt.org | Articles | JavaScript | Form | Form Tricks
Published on: Monday 21st July 1997 By: Martin Webb
Introduction
This article will describe some of the more interesting things that can be achieved with forms created
with HTML.
Input Types
There are eleven different types of form elements:
As you can see one of them (Hidden) is invisible.
Hidden Fields
Because Hidden fields are 'hidden' they can contain useful information which as web page developers we can use to
hide information from the visitor. When a form is submitted, the value of the hidden field is passed along with the
other form values.
For example we could have a hidden field which has a predefined value, e.g. the current page location so that we
can tell which form has been sent:
<FORM NAME="form1">
<INPUT TYPE="HIDDEN" NAME="hidden1"
VALUE="apage.html">
<INPUT TYPE="HIDDEN" NAME="hidden2"
VALUE="Form Tricks">
</FORM>
|
It is also possible to set the value of the hidden field:
<FORM NAME="form2">
<INPUT TYPE="HIDDEN" NAME="href" VALUE="">
<INPUT TYPE="HIDDEN" NAME="title" VALUE="">
<INPUT TYPE="HIDDEN" NAME="referrer" VALUE="">
<INPUT TYPE="HIDDEN" NAME="cookie" VALUE="">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
document.form2.href.value = window.location.href;
document.form2.title.value = document.title;
document.form2.referrer.value = document.referrer;
document.form2.cookie.value = document.cookie;
//--></SCRIPT>
|
It is also possible to retrieve the value of the hidden field:
<FORM NAME="form3">
<INPUT TYPE="HIDDEN" NAME="hidden1"
VALUE="apage.html">
<INPUT TYPE="HIDDEN" NAME="hidden2"
VALUE="Form Tricks">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
alert(document.form3.hidden1.value + ' ' + document.form3.hidden2.value);
//--></SCRIPT>
|
Form Submission
A form can be submitted in three ways:
- by the user pressing enter in a form with only one text field, or
- by the use of a submit button, or
- by using the submit() method.
The following example will allow all three:
<FORM NAME="form4">
<INPUT TYPE="TEXT">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="BUTTON" VALUE="Press Me" onClick="this.form.submit()">
</FORM>
|
ACTION
The forms ACTION attribute details the url of the page or cgi to be loaded/executed.
In Netscape the url can also use the mailto: type.
METHOD
Once the form has been submitted, it can be sent using two different methods (POST and GET) which
indicates how the form data should be sent to the server. The default is GET.
- GET
Appends the arguments to the action URL and opens it as if it were an anchor
- POST
Sends the data via an HTTP post transaction
ENCTYPE
ENCTYPE specifies the MIME type of the posted form data. The default value is
application/x-www-form-urlencoded.
When combined with the mailto: url type the form once received by the target addressee the data will look something
like the following:
FORMNAME=formname&fieldname=Some+sample+text
However, there is another ENCTYPE that can be used, i.e. text/plain, which is supported by some newsreaders.
TARGET
Loads the results of the form submission into the targeted window.
The window can be one of these values:
- 'windowname' - Specifies to load the link into the targeted window called 'windowName'.
- blank - Load into a new blank window.
- parent - Load into the immediate parent of the current document.
- self - Load into the current window.
- top - Load into the full body of the window, i.e. replaces the frameset.
The following example demonstrates all of the above:
<FORM NAME="form5"
ACTION="apage.html"
METHOD="POST"
ENCTYPE="text/plain"
TARGET="top">
<INPUT NAME="text5" TYPE="TEXT">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="BUTTON" VALUE="Press Me" onClick="this.form.submit()">
</FORM>
|
Overriding form attributes
It is possible, although currently only with Netscape Navigator, to override the ACTION, METHOD, ENCTYPE and TARGET
form attributes.
For example the following form, which by default sends a message using an ISP's form to email cgi, to send
the message using the mailto: method:
<SCRIPT LANGUAGE="JavaScript"><!--
function alter(object) {
if (navigator.appName.indexOf('Netscape') > -1) {
object.encoding = 'text/plain';
object.action = 'mailto:someone@somewhere.com';
object.method = 'POST';
}
return true;
}
//--></SCRIPT>
<FORM NAME="form6"
ACTION="/cgi-bin/userform.cgi"
METHOD="POST"
onSubmit="return alter(document.form6)">
<INPUT NAME="text6" TYPE="TEXT">
<INPUT TYPE="SUBMIT">
</FORM>
|
Cancelling Form Submission
Before the form is submitted by the browser it is possible to cancel the form submission,
possible uses include form validation.
The following example will never submit:
<FORM NAME="form7" onSubmit="return false">
<INPUT TYPE="TEXT">
<INPUT TYPE="SUBMIT">
</FORM>
|
Setting the return value of the onSumit event cause the form submission to be cancelled.
Using the return value in combination with a JavaScript function enables us to control whether the form is
submitted or not.
The following example will only submit if the text field is not empty.
<SCRIPT LANGUAGE="JavaScript"><!--
function myfunction() {
if (document.form8.textfield.value.length > 0)
return true;
else {
alert('Text field empty!');
return false;
}
}
//--></SCRIPT>
<FORM NAME="form8" onSubmit="return myfunction()">
<INPUT NAME="textfield" TYPE="TEXT">
<INPUT TYPE="SUBMIT">
</FORM>
|
Form Validation
There are two ways to validate form input, when the form is submitted or whilst the data is being entered.
There is only one JavaScript event to support validation of the form when it is submitted:
- onSubmit - Event handler of:
Form
There are many JavaScript events to support validation of the form whilst the data is being entered:
- onBlur - occurs when the form element loses focus. Event handler of:
Button, Checkbox, FileUpload, Password, Radio, Reset, Select, Submit, Text, Textarea
- onChange - occurs when the value of the form element changes. Event handler of:
FileUpload, Select, Text, Textarea
- onClick - occur when the user clicks on the form element. Event handler of:
Button, Checkbox, Radio, Reset, Submit
- onFocus - occurs when the form element gains the focus (opposite of onBlur). Event handler of:
Button, Checkbox, FileUpload, Password, Radio, Reset, Select, Submit, Text, Textarea
- onSelect - occurs when the form element is selected. Event handler of:
Text, Textarea
The following example demonstates some simple form validation, it checks that the two form fields are not empty using
the onSubmit and onChange event handlers:
<SCRIPT LANGUAGE="JavaScript"><!--
function validate(object,text) {
if (object.value.length > 0)
return true;
else {
alert(text + ' field empty!');
if (navigator.appName.indexOf('Netscape') > -1) {
object.focus();
}
return false;
}
}
function formvalidate() {
var validated = true;
if (!validate(document.form9.username,'Name'))
validated = false;
if (!validate(document.form9.useraddr,'Address'))
validated = false;
return validated;
}
//--></SCRIPT>
<FORM NAME="form9" onSubmit="return formvalidate()">
<INPUT NAME="username" TYPE="TEXT"
onChange="validate(this.form.username,'Name')">
<INPUT NAME="useraddr" TYPE="TEXT"
onChange="validate(this.form.useraddr,'Address')">
<INPUT TYPE="SUBMIT">
</FORM>
|
There is also one other event not already mentioned:
- onReset - occurs when a reset form element is clicked on. Event handler of:
Form
Feedback on 'Form Tricks'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
| 