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?

<TITLE>Subscribe CIS-L</TITLE>

<script language="JavaScript">
<!-- to hide script contents from old browsers

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)) { ('thanks.html')}
   else {
     alert("Cannot subscribe without a valid e-mail address!")

// end hiding contents from old browsers -->

<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 =" onSubmit="return test2(this)">
Please, enter your name:

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

<INPUT TYPE= "text" NAME="addr" onBlur="test2(this.form)">

Please enter the organization you are affiliated with:

<INPUT TYPE= "text" NAME="org" SIZE= 70>
Please select one of the following if you are a student:
<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

<INPUT TYPE="submit" VALUE="Subscribe" onClick="thanks(this.form)">
<INPUT TYPE="reset" VALUE="Start again">

Thanks for subscribing, and welcome to CIS-L!