CIS 89C Client-Side Programming with JavaScript

Unit 14 - Forms (week 6)

References:

McDuffie - Chapter 12 Forms and JavaScript

Topics:

Opening statement - McDuffie page 375

xhtml forms - McDuffie page 376

the form object - McDuffie page 376

this revisited - McDuffie page 390

return - McDuffie page 390

Summary

***********************************************************

Opening statement

Use of XHTML forms is a major topic in this class.

We will spend a a couple of weeks on forms.

Forms are used to collect data from users.

Data can also be displayed in form elements.

When using HTML without JavaScript, the form elements must be in a form to be useful. This is because, without JavaScript, the form submit must be used to transmit the data to the server to be processed.

We can process these input elements with JavaScript without putting them in a form. Sometimes we will put them in a form, and sometimes not.

(The McDuffie book says form elements must always be in a form. This is obsolete.)

When we put the form elements in a form, we can use a submit button to submit all the data to a server. We also can use a reset button when the elements are in a form. When we do not use a form, we can have buttons, but not submit and reset buttons. Without a submit button, there is no simple way to send the data from the form to a server. (Ajax is a new way to communicate data between the user's client machine and the server.)

***********************************************************

xhtml forms

Forms are html elements, which are used for various kinds of input.

The elements are sometimes called controls.

Form elements may contain these elements:

<form> - the form element itself, that often contains the other elements

<input> - there are several types of input:

<input type="text"> - one line of text input

<input type="password"> - one line of text input, that hides the typing

<input type="radio"> - one of a set of radio buttons

- only one can be selected

<input type="checkbox"> - independent check box

<input type="hidden"> - holds data, but not available to the user

<textarea> - multi-line input area

<select> - provides a list for the user to select from

<option> - one of the choices in a select list

There are two elements that produce buttons, <input> and <button>:

<input type="submit"> OR <button type="submit"> - to submit a form

<input type="reset"> OR <button type="reset"> - to reset a form

<input type="button"> OR <button type="button"> - does nothing,

unless processed by JavaScript

There is also an input image:

<input type="image"> - submits form and mouse position

There is also an input file:

<input type=file> - uploads a file

There are other elements including:

<label> - used to describe an element

<fieldset> - used to group elements

<legend> - used to describe a group

<optgroup> - used to group options

Attributes of a form element:

id - it is good to give every element an id

(the McDuffie and Pollock books say to use name)

method - how the data is to be sent to the server

action - exactly where is the data to be sent

method="post" - sends the data as a message by e-mail OR to the server

action="localScript.php" - to send it to a local script; e.g. a php script.

action="mailto:yourUserId@voyager.deanza.edu

- please do NOT send these to me

action="someURLonTheWebWhereItWillBeProcessed"

method="get" - can be used for processing a moderate amount of data

by a sever

***********************************************************

Processing a form

You do not need a form to be able to process the elements with JavaScript.

A form is required, if the contents of the form are to be submitted to the server, by using a submit button or submit image.

(The McDuffie book says you always need a form.)

We may not always use forms in this class.

We are not building server processing programs.

We are building the JavaScript code.

JavaScript can be used to completely process the input data, if a server is not required. For example we can calculate the average of a list of numbers in JavaScript, without using a server.

A server is needed if a centralized database is used.

In this case, a form is needed (or you could use Ajax).

JavaScript is commonly used to validate the input data, before it is sent to the server. For example, JavaScript can validate that all required fields are filled in, and that the data is in the required format.

URL-encoding

(more formally named: application/x-www-form-urlencoded)

When the data is sent to the server,

the data the user enters into a form are encoded into a URL-encoded string,

which is sent to the e-mail address or server.

To create the URL-encoding the following things are done:

1a) The name and value from each element is encoded with

the name equal sign the value entered by the user

Example:

userName=Mary where user is the userName of an input text element and Mary is the data the user typed

1b) These name-value pairs are separated by &

Example:

userName=Mary&age=34

2) Spaces are replaced by the + sign

Example:

userName=Mary+Smith

3) Any characters except a-z A-Z 0-9 - _ . ~

must be represented by a percent sign and their hexadecimal UTF-8 value.

Example:

%2A *

%40 @

***********************************************************

The form object

Accessing the form object with JavaScript

Three ways to access a form

1) The most reliable way to access a form, or any other element in the

Document Object Model (DOM), is:

XHTML:

<form id="idForThisForm"

method="post"

action="cgi-bin/serviceProgram.perl"

>

…

JavaScript:

var formReference = document.getElementById("idForThisForm");

| 2) A variation of this, given by the McDuffie and Pollock books, is to refer to the | name of the form:

| document.nameForThisForm

| I have not been able to get this one to work, because there are usually other

| elements between the document and the form, such as a div. You need to

| navigate down through all these intervening elements – too much trouble.

This only works in simple cases, and is no longer a standard approach.

The use of the name attribute is becoming less common.

The name attribute is required for radio buttons; otherwise, I suggest you do not use the name attribute. The problem is that the name value is not required to be unique.

3) An alternate approach to accessing a form is to use the array of forms in the document. The first one is:

document.forms[0]

That is an old way to access the form objects.

A newer, better way is:

var a_list_of_the_forms = document.getElementsByTagName("form");

a_list_of_the_forms[0]

This approach is good if there is only one form in the document.

This approach works for any tag name.

Of these three approaches, I like getElementById().

It is less dependent on the Document Object Model,
and thus less sensitive to differences in different browsers.

It conforms to the DOM 2 standard.

Also, it is applicable to all elements, not just to forms.

Form object properties

A form element has two properties:

elements a list of all the elements in the form, in the order they appear

length the number of these elements

Accessing control elements in a form

Once you have a form object, you can access the control elements in the form with:

my_form.elements.one_element_name

This can be shortened to:

my_form.one_element_name

That will give you one element, if the name is unique within the form.

Radio buttons in a set all have the same name.

When there are several control elements in the form, with the same name,

you will get an array of the elements, rather than getting one element.

It can be a nuisance to sometimes get one element, and sometimes get an array of elements.

You may find it better to just use:

document.getElementById("the_id");

Accessing attributes for any element

You can access the attribute value for any attribute of any element by using:

my_element.getAttribute("fred")

Where my_element is a reference to an Element object, and fred is the name of one of its attributes.

The McDuffie and Pollack show some old properties for accessing form attributes.

Event handlers for a form object

There are two event handlers to use with a form:

onsubmit and onreset

Important: These event handlers are specified in the <form> tag.

They happen when a submit or reset button is pressed within the form.

So, these are specified in the <form> tag, not the <button> or <input> tags.

Example:

<form onsubmit="return checkData(this);" … >

***********************************************************

this revisited

Consider this

A fourth way to get the form object:

4) this is the current object. When the form is submitted, this is the form object in the DOM. So, this is a fourth way to get the form object.

Call the function, passing this which is the current object.

<form onsubmit="return checkData(this)"

The function would use it something like this:

function checkData(currentForm)

{

// use the currentForm object in this function:

currentForm . . .

}

***********************************************************

return

The return value after validating a form should be Boolean true or false.

The function returns true or false.

The return in the onsubmit value passes the return on.

If the return value is true, the form is submitted.

If the return value is false, the form is NOT submitted.

NOTE: the JavaScript key word return is needed before the function call in the onsubmit attribute value, in order to return the Boolean value from the function to the browser's submit processing.

***********************************************************

Summary

We have seen several ways to find the form object.

The important events for a form are onsubmit and onreset.

The code that processes the onsubmit returns true to complete the submission of the form, or false to prevent the submission.