More on Forms
Let's think about form elements in a more formal way.
You can refer to a form element either by its name (form.name) or as an element of an elements array that is a property of a form. Forms also have a length property, which is the length of the elements array.
The properties of the Element object (a "super-object", which
includes what is common for each particular form element) include:
|
checked |
A read/write Boolean that indicates the selection state of form elements that can either be "checked" or "unchecked". |
|
defaultChecked |
A read-only Boolean that specifies the default state of a form element that can be "checked". |
|
defaultValue |
A read-only string the defines the default value. |
|
form |
A reference to the Form object that contains this element. |
|
length |
For the Select form element, the number of options contained in the options array. |
|
name |
A read-only string that specifies the name of the object. |
|
options[] |
For the Select form element, the Option objects that are the choices. |
|
selectedIndex |
For the Select form element. Read/write in Netscape, Read only in Internet Explorer. Specifies which option selected. |
|
type |
A read-only string that specifies the type of the form element. |
|
value |
The value of the object (submitted to the server). |
The methods of an Element include:
|
blur() |
Remove keyboard focus from an object. |
|
click() |
Simulates a mouse click on the form element. |
|
focus() |
Give keyboard focus to the element. |
|
select() |
For form elements that display editable text, select the text that appears in the element. |
And the event handlers for an Element include:
|
onblur() |
Called when the user takes keyboard focus from the element.. |
|
onclick() |
For form elements that are buttons; called when the user clicks the button. |
|
onfocus() |
Called when the user takes keyboard focus from the element.. |
|
onchange() |
For form elements that are not buttons; called when the user enters or selects a new value.. |
Not all properties, methods, and event handlers apply to all types of form elements.
Let's look at the following example, which displays, one at a time, the name of each form element:
The code for this example is:
<HTML>
<HEAD>
<TITLE>Pizza</TITLE>
<script>
function getElements(form1)
{
var i;
for (i = 0; i < form1.length; i++)
{
alert("Element:" + i +
"\n" +
"Name:" + form1.elements[i].name + "\n" +
"Type:" + form1.elements[i].type);
}
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFF80">
<form NAME="form1">
<center>
John's Pizza Company!
<BR>
Choose your size and toppings, click your
zip code, and type your directions!
</center>
<P>
<! Here's a drop-down list>
<SELECT NAME="size">
<option VALUE="medium">
Medium
<option SELECTED
VALUE="large"> Large
<option VALUE="extra large">
Extra Large
</SELECT>
<P>
<! Here are check boxes>
<INPUT TYPE="checkbox"
NAME="check1" VALUE="mushroom" CHECKED> Mushroom
<BR>
<INPUT TYPE="checkbox"
NAME="check2" VALUE="pepper" CHECKED> Pepper
<BR>
<INPUT TYPE="checkbox"
NAME="check3" VALUE="sausage"> Sausage
<BR><INPUT
TYPE="checkbox" NAME="check4"
VALUE="pepperoni"> Pepperoni
<BR><INPUT
TYPE="checkbox" NAME="check5"
VALUE="pineapple"> Pineapple
<BR><INPUT
TYPE="checkbox" NAME="check6"
VALUE="eggplant"> Eggplant
<p>
Enter your phone number:
<! Here's a text field>
<INPUT TYPE="text"
NAME="phone" VALUE="999-9999">
<P>
Choose your zip code:
<br>
<! Here are radio buttons>
<INPUT TYPE="radio"
NAME="zip" VALUE="12206" CHECKED> 12206
<INPUT TYPE="radio"
NAME="zip" VALUE="12208"> 12208
<INPUT TYPE="radio"
NAME="zip" VALUE="12210"> 12210
<INPUT TYPE="radio"
NAME="zip" VALUE="12212"> 12212
<p>
<! Here is a text area>
<TEXTAREA NAME=textarea1
ROWS="6" COLS="50" WRAP="virtual">
12206 Enter directions here:
</TEXTAREA>
<P>
<INPUT TYPE="reset" NAME=reset1
VALUE="Clear Form">
<INPUT TYPE="button"
NAME="submit1" VALUE="get elements"
onClick="getElements(form1);">
</form>
</BODY>
</HTML>
Here's another example. Choosing an option from the select loads a different picture, changes the price per flower, and changes the total. Changing the number of flowers ordered changed the total.
<HTML>
<HEAD>
<TITLE>Example 2</TITLE>
<script>
var Prices = new Array("$10",
"$15", "$20", "$5");
function dochange()
{
var index =
document.form1.flower.selectedIndex;
document.mypic.src=document.form1.flower.options[index].value;
document.form1.price.value =
Prices[index];
var price =
Prices[index].substring(1);
var quantityIndex =
document.form1.ordered.selectedIndex;
document.form1.total.value =
"$" + price *
document.form1.ordered.options[quantityIndex].value;
}
</script>
</HEAD>
<BODY>
<form NAME="form1">
<SELECT NAME="flower"
onchange="dochange();">
<option SELECTED VALUE="flower1.gif">
Flower 1
<option VALUE="flower2.gif">
Flower 2
<option VALUE="flower3.gif">
Flower 3
<option VALUE="flower4.gif">
Flower 4
</SELECT>
<p>
<img name="mypic"
src="flower1.gif">
<p>
Price per flower:
<input type="text"
value="$10" name="price">
<p>
Number Ordered:
<select name="ordered"
onchange="dochange();">
<option SELECTED VALUE="1">
1
<option VALUE="2"> 2
<option VALUE="3"> 3
<option VALUE="4"> 4
<option VALUE="5"> 5
<option VALUE="6"> 6
</select>
<p>
Total Value:
<input type="text"
value="" name="total">
</form>
<p>
<a href="js6.htm#ex2"> Go
Back </a>
</BODY>
</HTML>
How would we write code to change the URL of the current window by choosing an item from a Select?
Besides making use of Element methods and properties, the previous example also used a method of the String object. Here's a fuller listing for String:
Constructor:
|
String(value) |
Constructors a new String object. |
Property:
|
length |
The number of characters in the String. |
Methods:
|
anchor(Name) |
Returns a copy of the string, using Name as the anchor
name. |
|
big() |
Returns a copy of the string within a <BIG> container. |
|
blink() |
Returns a copy of the string within a <BLINK> container. |
|
bold() |
Returns a copy of the string within a <B> container |
|
charAt(index) |
Returns the character at the index position. |
|
fixed() |
Returns the string within a <TT> container. |
|
fontcolor(color) |
Returns the string within a <FONT COLOR=color> container. |
|
fontsize(size) |
Returns a copy of the string within a <FONT SIZE=size> container |
|
indexOf(substring[,start]) |
Returns the position of the first occurrence of substring, starting at start. Or -1. |
|
italics() |
Returns a copy of the string within an <I> container |
|
lastIndexOf(substring[,start]) |
Returns the position of the last occurrence of substring, starting at start. Or -1. |
|
link(href) |
Returns a copy of the string within an <A HREF=href> container. |
|
small() |
Returns the string within a <SMALL> container |
|
split(delimiter) |
Returns an array of strings created by splitting the string into substrings at delimiter boundaries. |
|
strike() |
Returns the string within a <STRIKE> container |
|
sub() |
Returns the string within a <SUB> container |
|
substring(from [,to]) |
Returns a substring starting at position from, and ending one before position to. |
|
sup() |
Returns the string within a <SUP> container |
|
toLowerCase() |
Returns the lower case version of the string. |
|
toUpperCase() |
Returns the upper case version of the string. |
|
toString() |
Returns the string. |
|
eval(String) |
Evaluates code within the string. |
Let's start by looking at code that
uses the eval() method.
<HTML>
<HEAD>
<TITLE>Example 3</TITLE>
<script>
function evaluate()
{
var expression = prompt("Enter a
numeric expression","");
alert("Expression is: " +
expression);
alert("Answer is: " +
(eval(expression)) );
}
</script>
</HEAD>
<BODY>
<form NAME="form1">
<input type="button"
value="hit me" onClick="evaluate()">
<p>
<a href="js6.htm#ex3"> Go
Back </a>
</BODY>
</HTML>
Many of the String methods are especially useful if you're writing code that is printed inside another window. Look at the following example.
<HTML>
<HEAD>
<TITLE>Example 4</TITLE>
<script>
function makeNew()
{
var you = prompt("Who are
you","");
var url = prompt("Enter your home
page", "http:");
window2 =
open("","second");
window2.document.writeln("Hi
" + you.bold().fontcolor("red") + "!<p>");
var text1 = "Go to home
page";
window2.document.writeln(text1.link(url)
+ "<P>");
}
</script>
</HEAD>
<BODY>
<form NAME="form1">
<input type="button"
value="Make new page" onClick="makeNew()">
<p>
<a href="js6.htm#ex4"> Go
Back </a>
</BODY>
</HTML>
To write to another window, you must make sure that there is a <P> or <BR> at the end of the string. Otherwise, it won't be written.
As long as we're writing to another window's document, let's consider the
properties and methods of the Document object:
|
alinkColor |
A String that specifies the color of activated links. |
|
anchors[] |
An array of Anchor objects; one for each hypertext target in the document. |
|
anchors.length |
The length of the anchors array. |
|
applets[] |
An array of Java objects. |
|
applets.length |
The length of the applets array. |
|
bgColor |
A String that specifies the background color. |
|
cookie |
A string which is the value of a cookie associated with this document. |
|
domain |
The domain name of the server that sent the document. |
|
embeds[] |
A list of the <EMBED> tags. |
|
fgColor |
A string that specifies the color of the document text. |
|
forms[] |
An array of Form objects |
|
images[] |
An array of Image objects. |
|
lastModified |
The date the document was last modified. |
|
linkColor |
The color of unvisited links. |
|
links[] |
An array of Link and Area objects |
|
location |
Same as the URL property. |
|
plugins[] |
Same as the embeds property. |
|
referrer |
The URL of the document that contained the link to the current document. |
|
title |
The title of the document. |
|
URL |
A string containing the complete URL of the document. Not in IE. |
|
vlinkColor |
Color of visited links. |
The methods of the Document object are:
|
clear() |
Clears the contents of the document. |
|
close() |
Closes a document stream. |
|
open() |
Opens a document stream. |
|
write() |
Write to the document or the document stream. |
|
writeln() |
|
Here's another example:
<HTML>
<HEAD>
<TITLE>Example 5</TITLE>
<script>
var Prices = new Array("$10",
"$15", "$20", "$5");
function dochange()
{
var index =
document.form1.flower.selectedIndex;
document.mypic.src=document.form1.flower.options[index].value;
document.form1.price.value =
Prices[index];
var price =
Prices[index].substring(1);
var quantityIndex =
document.form1.ordered.selectedIndex;
document.form1.total.value =
"$" + price *
document.form1.ordered.options[quantityIndex].value
}
function placeOrder(f1)
{
window2=open("","window2");
window2.document.open();
window2.document.write("<HTML>");
window2.document.write("<HEAD>");
window2.document.write("<TITLE>
Order </TITLE>");
window2.document.write("</HEAD>");
window2.document.write("<BODY
BGCOLOR='red'>");
window2.document.write("<IMG
SRC=" + document.mypic.src +"><P>");
window2.document.write("Total
cost is " + f1.total.value.big() + "<p>");
window2.document.write("<FORM>");
window2.document.write("<INPUT
TYPE='button' VALUE='Close' onClick=self.close();>");
window2.document.write("<P>");
window2.document.write("</BODY>");
window2.document.write("</HTML>");
window2.document.fgColor="green";
window2.document.bgColor="yellow";
window2.document.close();
}
</script>
</HEAD>
<BODY>
<form NAME="form1">
<SELECT NAME="flower"
onchange="dochange();">
<option SELECTED
VALUE="flower1.gif"> Flower 1
<option VALUE="flower2.gif">
Flower 2
<option VALUE="flower3.gif">
Flower 3
<option VALUE="flower4.gif">
Flower 4
</SELECT>
<p>
<img name="mypic"
src="flower1.gif">
<p>
Price per flower:
<input type="text"
value="$10" name="price">
<p>
Number Ordered:
<select name="ordered"
onchange="dochange();">
<option SELECTED VALUE="1">
1
<option VALUE="2"> 2
<option VALUE="3"> 3
<option VALUE="4"> 4
<option VALUE="5"> 5
<option VALUE="6"> 6
</select>
<p>
Total Value:
<input type="text"
value="" name="total">
<p>
<input type="button"
value="Place Order" onClick="placeOrder(document.form1);"
</form>
<p>
<a href="js6.htm#ex5"> Go
Back </a>
</BODY>
</HTML>