SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: drop down/form

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face drop down/form

    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.

  2. #2
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •