Online Documentation Server
 ÏÎÈÑÊ
ods.com.ua Web
 ÊÀÒÅÃÎÐÈÈ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ÏÎÄÏÈÑÊÀ

 Î ÊÎÏÈÐÀÉÒÀÕ
Âñÿ ïðåäîñòàâëåííàÿ íà ýòîì ñåðâåðå èíôîðìàöèÿ ñîáðàíà íàìè èç ðàçíûõ èñòî÷íèêîâ. Åñëè Âàì êàæåòñÿ, ÷òî ïóáëèêàöèÿ êàêèõ-òî äîêóìåíòîâ íàðóøàåò ÷üè-ëèáî àâòîðñêèå ïðàâà, ñîîáùèòå íàì îá ýòîì.




Previous Table of Contents Next

The onSubmit event handler is an attribute of the <FORM> tag because its action relates to the entire form, not only to its Submit button. A form can be submitted in several ways; the Submit button is only one of many.

The submit event occurs immediately upon clicking the Submit button, pressing Enter, or via any other method. Since JavaScript triggers the event prior to sending the data to the server, the event handler’s script is executed before the form’s data is actually submitted to the server for further processing. Timing is very important here. For example, suppose you ask the user to send you comments by filling a text area box in a form you place on your page. One would want to thank the user by replacing his comments in the text area box with a “Thank You” notice. You cannot use the onSubmit event handler to do that because the “Thank You” notice will replace the user’s input before it would have a chance to be submitted to the server. The net effect would be that you will receive the “Thank You” notice instead of the user’s comments. One way to work around the problem is to use an alert box instead of overwriting the form’s text area box.

The onSubmit event handler is commonly used to validate the content of a form’s element. Client-side form validation is gaining popularity because, rather than waiting for a server-side CGI script to respond, the user receives an immediate response regarding invalid entries. Let’s say you have a form with a text box in which the user is asked to type his or her e-mail address. You can use a simple JavaScript script that will make sure (upon submission) that the user’s entry is a string containing an “at” sign (@), which is a must for all e-mail addresses.

You can use the onSubmit event handler not only to validate the form’s elements but also to cancel its submission altogether. The form’s submission is aborted when the event handler returns a false value, as in the following example:

<FORM NAME="form1" onSubmit="return false">

Obviously, this example is not very useful because it disables the form submission unconditionally. Usually, a function validates the form and returns a true or false value accordingly. You can use the following structure to cancel or proceed with the form submission, according to the value returned by the function:

<FORM NAME="form1" onSubmit="return checkData()">

The following example shows how to create a form with a text area box and a Submit button which e-mails you the contents of the text area after prompting the user for confirmation:

<SCRIPT LANGUAGE="JavaScript">
<!--

function proceedSubmission() {
 return confirm("Click OK to mail this information")
}

// -->
</SCRIPT>
<FORM ACTION="mailto:yshiran@iil.intel.com"
METHOD="post" ENCTYPE="text/plain"
onSubmit="return proceedSubmission()">
<TEXTAREA NAME="inputField" COLS=40 ROWS=10></TEXTAREA><BR>
<INPUT TYPE="submit" VALUE="mail it!">
</FORM>

The Boolean value returned by the onSubmit event handler is actually the result of a confirm box presented to the user. Although some elements of this form are discussed later, you should be aware that, in order to receive the form’s content as plain, unscrambled e-mail, you need to assign a "text/plain" value to the ENCTYPE attribute.

onReset

Another event handler of the <FORM> tag is onReset. A reset event usually occurs when the user clicks the Reset button. Except for the triggering event, the onReset event handler behaves like the onSubmit event handler.

The following example asks the user to confirm the resetting process before executing it:

<FORM ACTION="mailto:yshiran@iil.intel.com"
METHOD="post" ENCTYPE="text/plain"
onReset="return confirm('Click OK to reset form to default status')">
<TEXTAREA NAME="input" COLS=40
ROWS=10></TEXTAREA><BR>
<INPUT TYPE="reset" VALUE="reset it!">
</FORM>


Figure 22-1.  A simple text area and a Reset button (both covered later in this chapter).

A page containing the preceding form appears in the following image:


Figure 22-2.  A confirm box asking the user for his or her confirmation to reset the form to its default state.

After clicking the Reset button, the following dialog box appears:


Note:  The onReset event handler was first implemented in Navigator 3.0x.


Methods

submit()

The submit() method submits a form much the same way as the Submit button. The submit() method sends data back to the HTTP server either via GET or POST submission schemes. The general syntax is as follows:

formName.submit()

formName is the exact reference of the form object. You can invoke this method when the user clicks a given hypertext link. Take a look at the following example:

<HTML>
<HEAD>
<TITLE>hypertext link submission</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function submitForm(sub) {
 document.forms[sub].submit()
}

function proceedSubmission() {
 return confirm("Click OK to mail this information")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="post" ACTION="mailto:yshiran@iil.intel.com" ENCTYPE=
"text/plain" onSubmit="return proceedSubmission()">
<TEXTAREA NAME="inputField" COLS=40 ROWS=10></TEXTAREA><BR>
<A HREF="thanks.htm" onClick="submitForm(0)">Mail it!</A>
</FORM>
</BODY>
</HTML>

Example 22-1 (ex22-1.htm). A hypertext link used to submit a form just like a submit button.

In Example 22-1 the form is submitted by the submitForm function which is invoked via the onClick event handler of a link object (links and image maps are discussed in Chapter 23, Links, Anchors, and Image Maps). After prompting the user for confirmation via the onSubmit event handler, the form, referenced as document.forms[0] (it is the first and only form in the page), is submitted through its submit() method. Example 22-1a shows the file thanks.htm which displays the “Thank You” notice referenced in Example 22-1:

<HTML>
<HEAD>
<TITLE>Thank you</TITLE>
</HEAD>
<BODY>
Thank you very much for your feedback
</BODY>
</HTML>

Example 22-1a (thanks.htm). The thank-you message displayed after submitting the mail in Ex. 22-1.


Note:  The submit method is broken in many versions of Navigator and Internet Explorer. Test every new release before usage.


Previous Table of Contents Next


With any suggestions or questions please feel free to contact us