This page requires Javascript support!

Javascript (Forms)



First in this section we're going to learn how to verify passwords in a form. Here is the script:


<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers

function validForm(passForm){
if (passForm.passwd1.value == ""){
alert("You must enter a password")
passForm.passwd1.focus()
return false
}
if (passForm.passwd1.value != passForm.passwd2.value){
alert("Entered passwords did not match")
passForm.passwd1.focus()
passForm.passwd1.select()
return false
}
return true
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="return validForm(this)" ACTION="someAction.cgi">
Your name: <INPUT TYPE=TEXT SIZE=30>
<P>Choose a password: <INPUT TYPE=PASSWORD NAME="passwd1">
<P>Verify password: <INPUT TYPE=PASSWORD NAME="passwd2">
<P><INPUT TYPE=SUBMIT VALUE="Submit"> <INPUT TYPE=RESET>
</FORM>
</BODY>

First we set up a function and check and see if the password field is empty. Next we put up an alert box if it is. The next statement basically says that if password1 and password2 do not match, then alert the user. The rest is the HTML tags for the form functions. Use the below form and test it out. Fist type in two wrong passwords and press submit, and then clear the boxes and submit. **This form only checks if the password is correct, it's only purpose is to check the passwords, it is not connected to a cgi-bin.**



Your name:

Choose a password:

Verify password:

 


This next example will show you how to create select-and-go navigation which will allow you to jump from page to page in your website without the use of a go button. An example is the one at the top of this page. Here is the script:


<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers

function jumpPage(newLoc){
if (passForm.passwd1.value == ""){
newPage = newLoc.options[newLoc.selectedIndex].value

if (newPage != " "){
window.location.href = newPage
}
}
// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<FORM ACTION="gotoLocation.cgi" METHOD=GET>
<SELECT NAME="newLocation" onChange="jumpPage(this.form.newLocation)">
<OPTION VALUE="home.html">Home
<OPTION VALUE="javascript.html">Javascript
<OPTION VALUE="javascript2.html">Javascript(continued)
<OPTION VALUE="javascript3.html">Javascript(continued)
<OPTION VALUE="javascript4.html">Javascript(continued)
<OPTION VALUE="javascript5.html">Javascript(continued)
<OPTION VALUE="javascript6.html">Javascript(continued)
</SELECT>
<NOSCRIPT>
<INPUT TYPE=SUBMIT VALUE="Go">
</NOSCRIPT>
</FORM>
</DIV>
</BODY>

First, we create a new function called jumpPage which is given the value of newLoc. Then we get a value from within the brackets called newLoc.selectedIndex. After this value is determined we get the name of the webpage that we want to jump to. The result is the variable newPage. If the newPage isn't equal to nothing then we jump to the specified URL which is defined in the if statement. Finally, the select tag creates newLocation and when the user picks from the pulldown menu, the onChange handler calls the jumpPage function which calls the URL from the OPTION tags by using this.form.newLocation. The NOSCRIPT tag says that if the user dosen't have javascript then create a go button for them to navigate with.




The next, and final script in this section, will cover menu items, radio buttons, fields, validating e-mail addresses, and validating zip codes. This will be a lengthy section with a lot of coding. Here is the script:


<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers

function validEmail(email){
invalidChars = "/:,;"

if (email == ""){         //email can't be empty
return false
}
for (i=0; i<invalidChars.length;i++){         //does the users input contain any invalid characters?
badChar = invalidChars.charAt(i)
if (email.indexOf(badChar,0) > -1){
return false
}
}
atPos = email.indexOf("@",1)         //there has to be a @ symbol
if (atPos == -1){
return false
}
if (email.indexOf("@",atPos+1) != -1){         //only one @ symbol
return false
}
periodPos = email.indexOf(".",atPos)
if (periodPos == -1){         //and at least one "." after the @ sign
return false
}
if (periodPos+3 > email.length){         //must be at least two characters after the "."
}
return true
}

function isNum(passedVal){         //Is it a number?
if (passedVal == " "){
return false
}
for (i=0; i<passedVal.length;i++){
if (passedVal.charAt(i) < "0"){
return false
}
if (passedVal.charAt(i) > "9"){
return false
}
}
return true
}

function validZip(inZip){         //Is this zip code valid?
if (inZip == " "){
return true
}
if (isNum(inZip)){         Check if zip is a number
return true
}
return false
}

function submitIt(carForm){
//see that they enter a color
colorChoice = carForm.color.selectedIndex
if (carForm.color.options[colorChoice].value == " "){
alert("You have to choose a color!")
return false
}

//make sure they enter the number of doors they want
doorOption = -1
for(i=0;i<carForm.DoorCt.length;i++){
if (carForm.DoorCt[i].checked){
doorOption = i
}
}
if (doorOption == -1){
alert("You have to choose the 2 or 4 door model")
return false
}

//can't have a four door with a sunroof
if (carForm.DoorCt[doorOption].value == "fourDoor" && carForm.sunroof.checked){
alert("The sunroof is only available on the two door car")
return false
}

//see if their e-mail is valid
if (!validEmail(carForm.emailAddr.value)){
alert("Invalid e-mail address")
carForm.emailAddr.focus()
carForm.emailAddr.select()
return false
}

//see if they entered a zip code
if (carForm.zip.value == " " && carForm.dealerList.selectedIndex == -1){
alert("You have to enter a Zip code or pick a dealer")
carForm.zip.focus()
return false
}

//checks and sees if the zip code is invalid
if (!validZip(carForm.zip.value)){
alert("Invalid Zip code entered")
carForm.zip.focus()
carForm.zip.select()
return false
}
//if everything is true up to this point then return true
return true
}

function doorSet(sunroofField){
if (sunroofField.checked){
for (i=0;i<document.myForm.DoorCt.length;i++){
if (document.myForm.DoorCt[i].value == "twoDoor"){
document.myForm.DoorCt[i].checked = true
}
}
}
}

// End hiding script from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<H2>Choose a Car</H2>
<FORM onSubmit="return submitIt(this)" ACTION="someAction.cgi" NAME="myForm">
<TABLE BORDER=0 CELLSPACING=7 CELLPADDING=7>
<TR>
<TD ALIGN=RIGHT>
E-mail Address:
</TD>
<TD COLSPAN=2>
<INPUT NAME="emailAddr" TYPE=TEXT SIZE=30>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Colors:
</TD>
<TD COLSPAN=2>
<SELECT NAME="color">
<OPTION VALUE=" " SELECTED>Choose a color
<OPTION VALUE=RED>Red
<OPTION VALUE=GREEN>Green
<OPTION VALUE=BLUE>Blue
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Options:
</TD>
<TD>
<INPUT TYPE=CHECKBOX NAME="sunroof" VALUE=YES onClick="doorSet(this)">Sunroof(Two door only)
</TD>
<TD>
<INPUT TYPE=CHECKBOX NAME=pSteering" VALUE=YES>Power Windows
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Doors:
</TD>
<TD COLSPAN=2>
<INPUT TYPE=RADIO VALUE="twoDoor" NAME="DoorCt">Two
<INPUT TYPE=RADIO VALUE="fourDoor" NAME="DoorCt">Four
</TD>
</TR>
<TR>
<TD COLSPAN=3>
Enter your zip code or pick the nearest dealer to you:
<P>Zip: <INPUT NAME="zip" TYPE=TEXT SIZE=5 MAXLENGTH=5>
<SELECT NAME="dealerList" SIZE=4>
<OPTION>Georgia--Atlanta
<OPTION>Georgia--Woodstock
<OPTION>Georgia--Carrollton
<OPTION>Georgia--Athens
<OPTION>Georgia--Kennesaw
<OPTION>Georgia--Franklin
<OPTION>Georgia--St. Simons
</SELECT>
<P><INPUT TYPE=SUBMIT VALUE="Submit"> <INPUT TYPE=RESET>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>

Here is a working example from the above script. Try not entering an e-mail address or choosing a sunroof 4-door car, etc...



Choose a Car

E-mail Address:
Colors:
Options: Sunroof(Two door only) Power Windows
Doors: Two Four
Enter your zip code or pick the nearest dealer to you:

Zip:

 

MORE
>