drop down/form

**krose** · Mar 13, 2007 18:22

Hi, I am a beginner to Javascript and I am at a loss with this code. In fact I am about to start pulling my hair out because I just can't figure it out.

I need to code a web page using JavaScript to do the following:

assign 2 classes to Steve Perry for the Fall 2002 semester.
Each time you make a selection from the dropdown lists (or change text
in anyway) change the message display in the window.

Make sure you don't display any value that is a hyphen or where nothing is entered
(You DON'T have to handle the condition where someone enters spaces in a text field)

Use the format shown below:

Note: Use \n to put newlines in your strings
Use \t to put a tab in your strings

When the user clicks the Submit Message button, display a message box with the following message:

If "Instructor (send mail)" is selected: I am sending this message to the Instructor
If "Save Email Text" is selected: I am saving this message

I have the HTML code, but just can't get the correct Javascript:

Code:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head><title>Maintain Schedule</title></head><body aink="FFFFFF" bgcolor="#c0c0c0" link="#0000ff" text="teal" vlink="#0000ff">
<h3>Class Schedule for Perry,Steve

<form name="myForm">

<table bgcolor="#c0c0c0" border="0" cellpadding="1" cellspacing="0" cols="5" width="70%">

<tbody><tr>
<td><font face="Arial"><font size="-1"><b>Course</b></font><b></b></font></td>
<td><font face="Arial"><font size="-1"><b>Semester</b></font><b></b></font></td>
<td><font face="Arial"><font size="-1"><b>Day/Time (e.g FRI 8-11:50am)</b></font><b></b></font></td>
<td><font face="Arial"><font size="-1"><b>Room</b></font><b></b></font></td>
</tr>

<tr>
<td><font face="Arial"><font size="-1">
</font></font></td>
</tr>

<tr>
<td><font face="Arial">
<font size="-1">
<select name="course6" size="1">
<option value="-">-
</option><option value="138">138
</option><option value="190">190
</option><option value="192">192
</option><option value="193">193
</option><option value="194">194
</option><option value="195">195
</option><option value="196">196
</option><option value="197">197
</option></select>
</font></font>
</td>

<td><font face="Arial"><font size="-1">
<select name="semester6" size="1">
<option value="-">-
</option><option value="Fall2001">Fall2001
</option><option value="Spring2002">Spring2002
</option><option value="Summer2002">Summer2002
</option><option value="Fall2002">Fall2002
</option></select>
</font></font></td>

<td><font face="Arial"><font size="-1">
<input value="" maxlength="30" name="daytime6" size="30" align="left" type="text">
</font></font></td>

<td><font face="Arial"><font size="-1">
<select name="room6" size="1">
<option value="-">-
</option><option value="B-7">B-7
</option><option value="B-9">B-9
</option><option value="B-12">B-12
</option><option value="EC-103">EC-103
</option><option value="EC-104">EC-104
</option><option value="EC-706">EC-706
</option><option value="Online">Online
</option></select>
</font></font></td>
</tr>

<tr>
<td><font face="Arial"><font size="-1">
<select name="course7" size="1">
<option value="-">-
</option><option value="138">138
</option><option value="190">190
</option><option value="192">192
</option><option value="193">193
</option><option value="194">194
</option><option value="195">195
</option><option value="196">196
</option><option value="197">197
</option></select>
</font></font></td>

<td><font face="Arial"><font size="-1">
<select name="semester7" size="1">
<option value="-">-
</option><option value="Fall2001">Fall2001
</option><option value="Spring2002">Spring2002
</option><option value="Summer2002">Summer2002
</option><option value="Fall2002">Fall2002
</option></select>
</font></font></td>

<td><font face="Arial"><font size="-1">
<input value="" maxlength="30" name="daytime7" size="30" align="left" type="text">
</font></font></td>

<td><font face="Arial"><font size="-1">
<select name="room7" size="1">
<option value="-">-
</option><option value="B-7">B-7
</option><option value="B-9">B-9
</option><option value="B-12">B-12
</option><option value="EC-103">EC-103
</option><option value="EC-104">EC-104
</option><option value="EC-706">EC-706
</option><option value="Online">Online
</option></select>
</font></font></td>
</tr>

</tbody></table>

<font face="Arial"><font size="-1">
<br>Send Message to: <font size="-1">

<input name="sendto" value="I" checked="checked" type="radio">Instructor (send email): 
<input name="sendto" value="T" type="radio">Save Email Text</font><br>

<textarea name="comments" rows="8" cols="80" wrap="physical"></textarea>

<br><br><input name="Submit Message" value="Submit Message" type="button">

<input name="deptchair" value="Pistone,Walter" type="hidden">
<input name="instructor_selected" value="Perry,Steve" type="hidden">


</font></font></form></h3></body></html>

please, please help if you can. I have been trying different things for almost 2 weeks now, and have searched and read so many books and websites and am just getting more confused.

**krose** · Mar 13, 2007 21:33

ok, just an update on my code after starting fresh... yet again!

this is what I have in the head (in the HTML I have called the functions) I have only finished (on this attempt) for the first two drop downs and the radio button.

Code:

<head>
<title>Maintain Schedule</title>

<script language="javascript" type="text/javascript">

//Course6 Function
function showSelection(cor1)
{
	var w = document.myForm.course6.selectedIndex;
	var selected_text = document.myForm.course6.options[w].text;
	document.getElementById("comments").innerHTML = "Steve,\n\tYour class schedule for next semester is:\n" + "\nCourse:  "+ selected_text
}

function showSem(sem1)
{
	var w = document.myForm.semester6.selectedIndex;
	var selected_text = document.myForm.semester6.options[w].text;
	document.getElementById("comments").innerHTML = "Steve,\n\tYour class schedule for next semester is:\n" + "\n\nSemester:  "+ selected_text
}

//Radio button function
function radioSubmit()
{
	if (document.myForm.sendto[0].checked == true)
		{
		alert("blah");
		}
	else
		{
		alert("stupid");
		}
}

</script>
</head>

So far the radio buttons work fine once 'submit' is clicked!!! however, everytime I select a new option from a dropdown box the previous selection disapears. (ex. I select a class, then when I select a semester, the class disappears in the text box.)
And I still have no idea how to make the text selection appear in the text box.
Also, for some un-apparent reason now this form will not work in firefox...

I attached an image of what the form is supposed to look like, I hope it helps.

I really hope someone can help me because I'm getting desperate and can't find any help in other forums or in any books. If anyone knows even how to do any part of this script I would be extremely appreciative!

User Tag List

Thread: drop down/form

Thread Tools

Display

drop down/form

Bookmarks

Bookmarks

Posting Permissions