Using objects and forms

Lets see what JavaScript can do to support forms through an example. If you recall, we have seen a simplified version of the CIS-L subscription form previously. Lets expand in that example today. You can see here the final product of enhancing the CIS-L form with JavaScript.

How were all these functions coded?

<HTML>
<HEAD>
<TITLE>Subscribe CIS-L</TITLE>

function test1(form) {
if (form.userName.value.length >= 3) {
return true}
else {
{
alert("Please enter your name!"); return false }
}
}

function test2(form) {
if ((form.addr.value.indexOf("@") != "-1") && (form.addr.value.length >= 9)) {
return true}
else {
alert("Not a valid e-mail address!"); return false }
}

function thanks(form) {
if ((form.addr.value.indexOf("@") != "-1") && (form.addr.value.length >= 9)) {
    window.open ('thanks.html')}
   else {
     alert("Cannot subscribe without a valid e-mail address!")
}
}

// end hiding contents from old browsers -->
</script>

</HEAD>
<body bgcolor="Silver" onLoad="alert('You are looking at the ' + document.forms[0] + ' form!')">

<H2><IMG ALIGN=top SRC="ball_pin.gif"> Subscribe here to CIS-L</H2><HR>

Please provide your full name, e-mail address and affiliation (the place you work for, or are a student at).

<FORM NAME="subscribe" METHOD=POST ACTION = mailto:abento@ubalt.edu" onSubmit="return test2(this)">
<P>
Please, enter your name:

<INPUT TYPE= "text" NAME="userName" onBlur="test1(this.form)" >
<P>
and your e-mail address:

<P>
Please enter the organization you are affiliated with:

<INPUT TYPE= "text" NAME="org" SIZE= 70>
<P>
Please select one of the following if you are a student:
<P>
<INPUT TYPE="radio" NAME="stud" VALUE="Undergraduate">Undergraduate
<INPUT TYPE="radio" NAME="stud" VALUE="MBAMSstudent">MBA or MS student
<INPUT TYPE="radio" NAME="stud" VALUE="Ph.D.student">Ph.D. student
<P>

<P>
Thanks for subscribing, and welcome to CIS-L!

</FORM>

/BODY>
/HTML>