Forms
A Quick Introduction
 Hidden
Fields
From a JavaScript standpoint, hidden text boxes behave just like
regular text boxes, sharing the same properties and methods. From a user
standpoint, hidden text boxes "don't exist" because they do
not appear in the form. Rather, hidden text boxes are the means by which
special information can be passed between server and client. They can
also be used to hold temporary data that you might want to use later.
For server/client communications, the server can send data to the
client, storing a special value in a hidden field that the user doesn't
see. For example, the value might be the number of times the user has
submitted a form in the same session. If it's more than say, five times,
the server knows not to accept any more entries from that user. The
submission count is stored in a hidden field.
Hidden fields are particularly handy for storing temporary data that
your JavaScript program may need. Store the data in a hidden field, and
it stays as long as the document remains loaded. (However, note that the
contents of hidden fields are lost when a document or frame is reloaded
or resized.)
TO SUM UP 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, ie, 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>
document.form2.href.value
= 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>
alert(document.form3.hidden1.value
+ ' ' + document.form3.hidden2.value);
</SCRIPT>
See the above examples combined in Action
Form
Submission
A form can be submitted in 3 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 >
See Demo and additional Information on the
above example.
ACTION
The forms ACTION attribute details the
URL of the page or cgi to be loaded/executed.
The URL can also use the mailto:
type.
ACTION will be covered in Week 6.
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
METHOD will be covered in Week 6.
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 News Readers.
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.
This will be covered again in Week 8.
The following example demonstrates all of the above:
<FORM
NAME="form5"
ENCTYPE="text/plain"
TARGET="_top"
METHOD="POST"
ACTION="mailto.cgi">
<INPUT
TYPE="text"
NAME="text5">
<INPUT
TYPE="button"
VALUE="Press Me"
onClick="this.form.submit();">
<INPUT
TYPE="submit">
</FORM>
Overriding
Form Attributes
It is possible 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>
function alter(form) {
if (navigator.appName.indexOf('Netscape')
> -1) {
form.encoding
= 'text/plain';
form.action
= 'mailto:someone@somewhere.com';
form.method
= 'POST';
}
return true;
}
</SCRIPT>
<FORM
NAME="form6"
ACTION="/cgi-bin/userform.cgi"
METHOD="POST"
onSubmit="return
alter(this);">
<INPUT
TYPE="text"
NAME="text6">
<INPUT
TYPE="submit">
</FORM>
Canceling
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"
NAME="text7">
<INPUT
TYPE="submit">
</FORM>
Setting the return value of the onSubmit
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>
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
TYPE="text"
NAME="textfield">
<INPUT
TYPE="submit">
</FORM>
This will be covered again next week.
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
while 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 demonstrates some simple form validation, it
checks that the two form fields are not empty using the onSubmit
Event Handler:
<SCRIPT>
function ValidateInput(form)
{
var LB = "\n";
var msgHdr = "Please fill out your:"
+ LB + LB;
var msg = "";
if (form.First.value.length
== 0) msg += "First Name" + LB;
if (form.Last.value == "") msg
+= "Last Name" + LB;
if (msg.length
> 0) {
alert(msgHdr
+ msg);
return false;
}
else return true;
}
</SCRIPT>
<FORM
NAME="form9"
onSubmit="return
ValidateInput(this);">
First Name: <INPUT
TYPE="text"
NAME="First">
Last Name: <INPUT
TYPE="text"
NAME="Last">
<INPUT
TYPE="submit">
</FORM>
See the Demo - This demo will be
expanded on next week.
There is also one other event not already mentioned:
- onReset - occurs
when a reset form element is clicked on. Event Handler of: Form
|
