The main
advantage of JavaScript forms over HTML forms is that the JavaScript forms
are much more dynamic . JavaScript allows you to process simple forms
without invoking the server. The JavaScript forms therefore allows you
to take care of all your preliminary requirements, such as user input
data validation, manipulating form controls, triggering JavaScript events,
and submitting the form to the CGI program. JavaScript forms can have
elements such as:
·
FORM NAME: This variable contains the name of the form. The name
of the form can be used to reference the form elsewhere in the code. The
name of the form should comply with JavaScript's variable/function naming
rules.
·
ACTION: This variable defines the action of the form when the submit
button on the form will be pressed and when it is submitted to the CGI
program running on the server.
·
METHOD: This variable defines the method (post) that specifies
how the data is passed to the server when the form is submitted.
·
INPUT TYPE: This variable defines input control types used on the
form. This is standard HTML markup. The NAME property allows you to set
the name of the control and the VALUE property allows you to read or write
a value of the input box.
·
onClick: This is an event handler. When the button is clicked,
JavaScript executes the expression within the quotes.
A typical
form looks as shown in the example given below:
|
<FORM
NAME="myform" ACTION="myform1.asp" METHOD="POST">
Enter
Your First Name: <BR>
<INPUT
TYPE="text" NAME="fname" VALUE=""><P>
<INPUT
TYPE="button" NAME="Submit" Value="Click" onClick="testResults(this.form)">
</FORM> |
The JavaScript
forms can have objects such as:
·
Text box and Text Area: These are input boxes that allow you to
accept text data from the user. If the text input is big and includes
descriptive information then Text Area should be used else a Text box
should be used.
Example:
assuming the name of the form is myform
|
Usage
in the form |
<INPUT
TYPE="text" NAME="fname" VALUE=""><P>
<TEXTAREA
NAME="myarea" COLS="40" ROWS="7">
</TEXTAREA> |
|
Retrieving
values |
FirstName
= myform.fname.value
TextareaValue
= myform.myarea.value
|
·
Radio buttons: These are input buttons that allow user to select
only one option from a group of options. For example, you can use them
to accept the gender of the user or the country of the user. Radio buttons
must always be more than one on a form. The radio buttons allow you to
limit the possibility of invalid data provided by the user.
To use radio
button on a form, you need to remember that each radio button that belong
to the same group must have the same name. JavaScript creates an array
of the radio button with the same name. You can retrieve the value of
the radio button by using the array indexes. By default the first button
in the series is numbered as 0, the second as 1, and so on.
Example:
assuming the name of the form is myform
|
Usage
in the form |
<INPUT
TYPE="radio" NAME= “sports" VALUE="Football" > Football <br>
<INPUT
TYPE="radio" NAME="sports" VALUE="Hockey" > Hockey<br>
<INPUT
TYPE="radio" NAME="sports" VALUE="Cricket" > Cricket <br>
<INPUT
TYPE="radio" NAME="sports" VALUE="Baseball"> Baseball<br>
|
|
Retrieving
values |
for
(i=0; i<document.myform.sports.length; i++)
{
// Check which of the radio button is checked
// and then assign its value to a variable.
if (document.myform.sports[i].checked==true)
{
SportsSelected = document.myform.sports[i].value
}
} |
·
Check box: These are input buttons that allow user to select multiple
options from a group of options. For example, you can use them to accept
the favorite subjects of the user or the skills of the user. The check
boxes also allow you to limit the possibility of invalid data provided
by the user. You can prompt user to select the valid options and you can
keep the default options checked (if required).
Example:
assuming the name of the form is myform
|
Usage
in the form |
<input
type="checkbox" name="skill1" value="JavaScript"> JavaScript
<br>
<input
type="checkbox" name="skill2" value="C#"> C# <br>
|
|
Retrieving
values |
if(document.myform.skill1.checked
== true)
{ alert('User
knows JavaScript'); }
else
{ alert('User
does not know JavaScript'); }
if(document.myform.skill2.checked
== true)
{ alert('User
knows C#); }
else
{ alert('User
does not know C#); } |
|
To
check the checkbox |
document.myform.skill1.checked
= true; |
|
To
uncheck the checkbox |
document.myform.skill1.checked
= false; |
·
List box or Combo box: These input boxes displays a list of values
on screen and allow the user to select or multi-select the desired value(s).
In list box the values are always visible on screen and in drop box or
combo box the values can be seen by clicking on the combo box. You can
dynamically populate list boxes or combo boxes using JavaScript. However,
you need to take care that you populate the list box while the page loads
otherwise the list box will appear empty.
Example:
assuming the name of the form is myform
|
Usage
in the form |
//
function to populate the list box
function
addOption(selectbox, text, value )
{
var
option = document.createElement("OPTION");
option.text
= text;
option.value
= value;
selectbox.options.add(option);
}
-------------------------------------------------------------------------------------------------
//Declaring
an array of months
var
months = new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
//calling
the function
for
(var i=0; i < months.length;++i){
addOption(document.drop_list.Month_dropdown,
month[i], month[i]);
}
|
|
Function
to retrieve the selected values |
function
GetSelectedItem()
{
var len = document.myform.Month_dropdown.length;
var chosen=null;
for (i = 0; i < len; i++)
{
if (document. document.myform.Month_dropdown.length [i].selected)
{
chosen = document. document.myform.Month_dropdown.length [i].value;
}
}
return
chosen;
}
|
|
Populating
the list and getting the selected value
|
<body
onLoad="addOption_list()";>
<FORM
name="myform" action="myform2.asp" method="POST" >
<SELECT
NAME="Month_dropdown" onChange = GetSelectedItem()>
<Option
value="" >Month list</option>
</SELECT>
</form>
</body> |
Usually when
you submit a form, you check if the input fields are left blank or have
invalid values. To check if the input fields are left blank, you can write
the code as:
|
function
checkempty()
{
if ( myform.text1.value = = " ")
{
alert ("Please
provide a value in the field ");
myform.text1.focus
( );
return
false;
}
}
|
To check
if a text field has a desired number of characters. For example a username
field has between 8-12 characters, you can write the code as:
|
function
checkCharacters()
{
if ( myform.text1.value.length < 8) || (myform.text1.value.length
> 12))
{
alert ("The field length should be between 8 to 12 characters");
myform.text1.focus ( );
return false;
}
}
|
To check
field has valid numeric string, you need to write a function as:
|
function
checkNumeric(myString)
{
var ValidChars = "0123456789.-";
var myChar;
var Result = true;
for (i = 0; i < myString.length && Result == true; i++)
{
myChar = myString.charAt(i);
if (ValidChars.indexOf(myChar) == -1)
{
Result = false;
}
}
return Result;
}
|
You can now
call the function as:
|
if
(myform.text2.value.length == 0)
{
alert("Please enter a value.");
}
else if (checkNumeric (myform.text2.value) == false)
{
alert("Please provide a numeric value!");
} |
|