Working with Forms in JavaScript
The POST Method
The POST method of submitting form data to a server is of a
higher level of security simply because the users can't see
what is being submitted to the server. The form data is
submitted within the body of the http request to the server.
Security considerations aside, the POST method is used to
send large amounts of form data to the server, amounts which
the GET method will not be able to handle. The POST method
isn't used much, as the amount of information required to
overload the GET method is actually quite large.
When the browser sends a request to the web server for
information such as a web page, the information sent to the
server is of two parts - the head and the body. The method
of submitting the form data to the server is almost the same
as a simple page request. The browser substitutes the URL of
the page the user might want with the form data the user has
provided as the body of the request. The server catches
this, and processes the data according to the CGI script
given within the ACTION attribute of the FORM tag.
Constructing your HTML form is exactly the same as if you
were using the GET method. The form contents must be within
the opening and closing HTML FORM tags, and some sort of
INPUT button must be provided to tell the browser when to
input the form data.
Accessing Form Data Properties
In order to verify the information the user has entered, you
must be able to access the information. To this end, the
creators of JavaScript have provided two major means of
accessing and working with form data - the Form Array, which
is a property of the document object, and the Elements
array, which is an array within the Form object. Both are
used quite extensively to validate user input and perform
some simple processing tasks on the client side.
The forms array of the document object and the elements
array of the forms object work the same as any other array.
The forms are listed within the array in the order they
appear within the BODY of the HTML document. Each is
accessed by its index number within this array, as the
following syntax example shows.
document.forms[indexNumber].formProperty
OR
document.elements[indexNumber].formProperty
The above example shows the accessing of a form within
the current document. The property to be accessed within the
form is represented by the formProperty. Simple. Note that
the array index is zero based, meaning the count of the
items within the array start at the number zero and go up
from there. forms[0] would be the first form within the
document, forms[1] would be the second, and so on. Consult
the JavaScript Language Reference to find a listing and in
depth discussion on each of the properties of the forms
array.
It may be easier when you have many forms in one document
to access the properties of the forms via the form names.
The name of a form is specified through the use of the HTML
NAME attribute of the FORM tag. Examine the syntax example
below.
document.elementName.formProperty.value
The above syntax example shows the accessing of a
property via the elementName name of the element, in this
case a form element. The value keyword given after the
property tells the browser that the value given or selected
by the user is to be used as the value of the statement. The
value is usually the product of the user either typing
something within an INPUT element's text field or the
choosing of an option or options through the use of radio
buttons, checkboxes, or SELECT / OPTION lists. In the case
of the text field, the value becomes the typed text. In the
case of the radio buttons, checkboxes, and SELECT / OPTION
lists, the value is specified by the HTML VALUE attribute
given within the pertinent element by you, the page
author.
Well thanks for reading and stop in next week where we'll
have more open source programming fun on tap.
Working with Forms in JavaScript
The JavaScript Chronicles
Getting to Know Dynamic HTML
The JavaScript Chronicles
JavaScript Introduction
Part 2: Data Types
Part 3: Arrays
Part 4: Operators
Part 5: Conditional Statements
Part 6: JavaScript Functions
Part 7: Pattern Matching - The RegExp Object
Part 8: Introduction to Server Side JavaScript
Part 9: Server Side JavaScript Mail Sending
Part 10: Server Side JavaScript and File Manipulation
Part 11: Working with Forms in JavaScript
Part 12: Getting to Know Dynamic HTML
|
