View Full Version : Help with simple JavaScript page for school?

01-26-2009, 10:29 AM
Hi guys, I have an assignment for school that I'm working on that should be really simple, but for some reason it doesn't seem to want to work for me...here are the instructions I am to follow:

1. Create a web page that utilizes drop-down lists, check boxes, radio buttons, and textboxes in a form to collect information from a user.
2. On click of a buttton execute a javascript function that will determine the form's control settings and output the information to a textarea.
3. Store a brief list of comic book titles in an array.
4. On Form Load add list items to the drop down list using a loop and the array.
5. Come up with other appropriate uses for the requested controls.

Pretty straightforward...now, I know quite a bit about JavaScript and maybe a little bit more, but I am by no means an expert (hence why I need help at this point). Here's the code for the page that I've tried to develop, but it doesn't seem to do what I want it to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Management - Lab 1</title>

<script type="text/javascript">

function addOption(selectbox,text,value )
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

function addOption_list(selectbox)
var comicBooks = new Array("Batman","Spiderman","Hulk","X-Men","Superman");
for (var i=0; i < comicBooks.length;++i)
addOption(document.myForm.comicList, comicBooks[i], comicBooks[i]);

function doStuff(x)

var interests = "";

if (x.sports.checked)
interests = interests + "Sports, ";
if (x.videogames.checked)
interests = interests + "Video Games, ";
if (x.televisionmovies.checked)
interests = interests + "Television/Movies, ";
if (x.webdesign.checked)
interests = interests + "Web Design, ";
if (x.programming.checked)
interests = interests + "Programming, "
if (x.other.checked)
interests = interests + "Other";


function printStuff(x)
document.myForm.outputResults.value = "Name: " + document.myForm.name.value + "\nAge: " + document.myForm.age.value + "\nSex: " + document.myForm.sex.value + "\n\nInterests: " + interests"

function handleErr(msg,url,l)
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
return true;




<form name="myForm">

<strong>Personal Information:</strong><br />
Name: <input type="text" name="name" /><br />
Age: &nbsp&nbsp <input type="text" name="age" /><br /><br />

<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" /> Female<br /><br />

<strong>Interests:</strong><br />
<input type="checkbox" name="sports" /> Sports<br />
<input type="checkbox" name="videogames" /> Video Games<br />
<input type="checkbox" name="televisionmovies" /> Television/Movies<br />
<input type="checkbox" name="webdesign" /> Web Design<br />
<input type="checkbox" name="programming" /> Programming<br />
<input type="checkbox" name="other" /> Other<br /><br />

<strong>Favourite Comic Book:</strong><br />
<select name="comicList">
<option value="" >Comic Books</option>

<input type="button" name="Submit" value="Submit" onclick="doStuff(document.myForm)" /><br /><br /><br />

<textarea rows="15" cols="50" name="ouputResults" readonly></textarea>



One of the main things I am having a problem with is getting the drop down menu to load the items from the array, instead of having them already listed within the form. I tried using this tutorial (http://www.plus2net.com/javascript_tutorial/list-adding.php) to get it to work, but so far I haven't been able to resolve whatever the problem seems to be.

If anyone can give me some help or some pointers, or point me in the right direction for what I'm doing wrong, I'd really appreciate it!

Philip M
01-26-2009, 11:24 AM
As far as I can see the function
is not called anywhere. Presumably you want it in <body onload

Two other bugs:
if (x.other.checked)
interests = interests + "Other";
} // missing closing brace

document.myForm.outputResults.value = "Name: " + document.myForm.name.value + "\nAge: " + document.myForm.age.value + "\nSex: " + document.myForm.sex.value + "\n\nInterests: " + interests " // delete unwanted "

A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"

01-26-2009, 11:30 AM
Aha! Yes, that fixed several of my problems...a question that raises is, when I call the addOption_list() function in my body onload, do I have to pass a parameter through the parenthesis or not? (I'm assuming I don't, but I want to be sure).

After fixing those issues, my error function gives me this error: on line 61, interests is not defined...that line is my output line, and I'm assuming it has to do with the part right at the end where I try to concatenate the value contained in the interests variable...so how come it isn't working?

Edit: Ok, I realized the error is occurring because the variable interests is defined within the doStuff() function, but I'm trying to use it within the printStuff() function...I tried declaring the variable outside of both functions, but that returned a syntax error in my Dreamweaver screen...how can I work around this?

Edit2: Nevermind, I managed to figure it all out! Thanks for your help mate, I probably would have never seen those things! :D