Previous


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>

Previous


HTML Reference JavaScript Reference