JavaScript - Webtop Reference
Updated: 21 August 1998
IF Statements (branching conditionals)
An IF-THEN-ELSEIF-ELSE statement looks like:
if ( condition1 ) { statement1
} else if ( condition2 ) { statement2
} else { statement3
}
JavaScript provides the web developer with a unique ability to verify form fields on the
client-side (the web browser) so we don't waste value server resources by submitting the form,
using the server to check the data, send back an error message (if appropriate, then resubmit
the form), then send back a confirmation. All those steps results in wasted bandwidth.
Using JavaScript, however, we can perform the same valuable error-checking without wasting the
already limited bandwidth. First, I will show you the entire form page, see
Example 1a. Then, we will break down the code starting with the HTML, see
Example 1b, then we will look at the JavaScript portion, see
Example 1c.
Example 1a: HTML feedback form with JavaScript validation
<HTML>
<HEAD>
<TITLE>JavaScript Form</TITLE>
<SCRIPT>
<!--
function formCheck() {
var varFName = document.Form1.FirstName.value;
var bErrorMsg = ""; // error message
var bError = false; // error flag
if ( varFName == "" ) { // if it's empty
bErrorMsg = bErrorMsg + "FIRST NAME blank\n";
bError = true;
}
if ( bError ) {
alert( bErrorMsg );
} else {
document.Form1.submit();
}
}
// -->
</SCRIPT>
</HEAD>
The first thing you should notice is the JavaScript code and HTML code reside in the same file.
This is important since one of the main benefits of JavaScript is client-side validation,
therefore, we don't want to download a separate file to perform the validation.
In Example 1, the JavaScript code is displayed in red (within the SCRIPT tags) while the HTML
form tags are displayed in green (within the BODY tags).
Notice all HTML tags should reside between the BODY tags. Normally when you have a form, you
submit the results with <INPUT TYPE=Submit>, but since we want the check the data before
anything is sent to the server, we use a button-type input
[<INPUT TYPE=Button VALUE=Submit onClick=formCheck();>] but include the command "onClick"
to call the JavaScript funtion.
It's best to name your form so you can easily identify it later -- in this case, this form is
called "Form1" and it is case-sensitive. Remember, JavaScript is case-sensitive!
<HEAD>
<TITLE>JavaScript Form</TITLE>
<SCRIPT>
<!--
function formCheck() {
var varFName = document.Form1.FirstName.value;
var bErrorMsg = ""; // error message
var bError = false; // error flag
if ( varFName == "" ) { // if it's empty
bErrorMsg = bErrorMsg + "FIRST NAME blank\n";
bError = true;
}
if ( bError ) {
alert( bErrorMsg );
} else {
document.Form1.submit();
}
}
// -->
</SCRIPT>
</HEAD>
First, the JavaScript is placed between the HTML comment characters <!-- and -->.
They're necessary in case someone tried to access your web site without a JavaScript-enabled
web browser, such as Lynx, or if JavaScript is simply disabled. With these comment tags in
place, older browsers will simply ignore the JavaScript code, instead of printing them out as
jibberish. If you're wondering why the last line is // -->, instead of -->, then you're
pretty observant.
JavaScript is smart enough to know that you're trying to hide the code from incompatible
browsers when you specify the opening comment tag, so it's ignored by JavaScript. But,
JavaScript does not know how to deal with the closing comment tag since it's used by some
versions of JavaScript. Therefore, you have to tell JavaScript to ignore the closing HTML
comment tag by including the JavaScript comment characters "//" before the closing HTML comment
tag.