Forms
Check Forms Tutorial by Joe Barta
Interactive Forms with JavaScript
Example 10: Click to Check an HTML Example on Forms
How you can access your HTML forms from java ?
You can use the forms array to refer to forms. This array includes an item for each form element, indexed starting with zero.
For example, if the first form in a document has the name form1, you can refer to it in one of two ways:
using the name: document.form1
using the index: document.forms[0]
Example 11: Enhancing the Previous Example Using JavaScript
<HTML>
<HEAD><TITLE>Order Form</TITLE></HEAD>
<BODY>
<H2>Order Form</H2>
<SCRIPT>
function Total() {
var tot = 0;
tot += (10 * document.order.qty1.value);
tot += (20 * document.order.qty2.value);
document.order.totalcost.value = tot;
}
function UpdateCost(number, unitcost) {
costname = "cost" + number;
qtyname = "qty" + number;
var q = document.order[qtyname].value;
document.order[costname].value = q * unitcost;
Total();
}
var errfound = false;
function ValidLength(item, len) {
return (item.length >= len);
}
function ValidEmail(item) {
if (!ValidLength(item, 5)) return false;
if (item.indexOf ('@', 0) == -1) return false;
return true;
}
function error(elem, text) {
if (errfound) return;
window.alert(text);
elem.select();
elem.focus();
errfound = true;
}
function Validate() {
errfound = false;
if (!ValidLength(document.order.name1.value,4)) error(document.order.name1,"Invalid Name");
if (!ValidLength(document.order.phone1.value,7)) error(document.order.phone1,"Invalid Phone");
if (!ValidEmail(document.order.email.value)) error(document.order.email, "Invalid Email Address");
if (document.order.totalcost.value == "") error(document.order.qty1, "Please Order at least one item.");
return !errfound;
}
</SCRIPT>
<FORM NAME="order" onSubmit="return Validate();">
<B>Name:</B><INPUT TYPE="text" NAME="name1" SIZE=20>
<B>Phone:</B><INPUT TYPE="text" NAME="phone1" SIZE=15>
<B>E-mail:</B><INPUT TYPE="text" NAME="email" SIZE=20><BR>
<B>Rules:</B><BR>
<TEXTAREA NAME="description" COLS=40 ROWS=4>
Enter your description.
</TEXTAREA><BR>
Qty:<INPUT TYPE="TEXT" NAME="qty1" VALUE="0" SIZE=4 onChange = "UpdateCost(1, 10);">
Cost:<INPUT TYPE="TEXT" NAME="cost1" SIZE=6>($10)<BR>
Qty:<INPUT TYPE="TEXT" NAME="qty2" VALUE="0" SIZE=4 onChange = "UpdateCost(2, 20);">
Cost: <INPUT TYPE="TEXT" NAME="cost2" SIZE=6>($20)<BR>
<B>Total Cost:</B>
<INPUT TYPE="TEXT" NAME="totalcost" SIZE=8><HR>
<B>Method of Payment</B>:
<SELECT NAME="payby">
<OPTION VALUE="check" SELECTED>Check
<OPTION VALUE="cash">Cash
</SELECT><BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Send Order">
<INPUT TYPE="RESET" VALUE="Start Over">
</FORM>
</BODY>
</HTML>
Images
Example 12:
<HTML>
<HEAD>
<TITLE>Switch Images Test</TITLE>
<BASE TARGET="main">
</HEAD>
<BODY BGCOLOR="#FFFF66">
<A HREF="page.html" TARGET="main" onMouseOver="downImg('buttonA');" onMouseOut="upImg('buttonA');">
<IMG NAME="buttonA" BORDER="0" SRC="images/buttonA1.jpg" width="118" height="40"></A><BR>
<A HREF="page.html" TARGET="main" onMouseOver="downImg('buttonB');" onMouseOut="upImg('buttonB');">
<IMG NAME="buttonB" BORDER="0" SRC="images/buttonB1.jpg"></A><BR>
<SCRIPT Language="JavaScript">
buttonA1=new Image(); buttonA1.src="images/buttonA1.JPG";
buttonA2=new Image(); buttonA2.src="images/buttonA2.JPG";
buttonB1=new Image(); buttonB1.src="images/buttonB1.JPG";
buttonB2=new Image(); buttonB2.src="images/buttonB2.JPG";
function upImg(imgName)
{
tmp=eval(imgName + "1.src");
document[imgName].src=tmp;
}
function downImg(imgName)
{
tmp=eval(imgName + "2.src");
document[imgName].src=tmp;
}
</SCRIPT>
</BODY>
</HTML>