Form Tricks

You are here: irt.org | Articles | JavaScript | Form | Form Tricks [ previous next ]

Published on: Monday 21st July 1997 By: Martin Webb

• Introduction
• Input Types
• Hidden Fields
• Form Submission
• ACTION
• METHOD
• ENCTYPE
• TARGET
• Overriding form attributes
• Cancelling Form Submission
• Form Validation

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

Related items

Chapter 6: Beginning JavaScript

Controlling Data Entry Using Form Fields

Form Image Button 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

Dropdown Menus #3

Check Boxes and Radio Buttons

©2018 Martin Webb