Solved

select box values

Posted on 2002-03-24
5
160 Views
Last Modified: 2008-07-03
i have a select box called type in the following code. i want to be able to dispay the other select boxs according to what the user selects from the type box. Is there any way of doing this.

caz



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body bgcolor="#FFFFDF">


<p align="center">
<big><u>New Appointment</u></big>
</p>
<?
echo "<form name='form1' action='diarynews.php?year=".$year."& month=".$month."& day=".$day."' method='post'>";
?>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30">Type</td>
    <td><select size="1" name="type">
        <option selected>Appointment</option>
        <option value="Nontimed">Non-timed Event</option>
        <option>Reminder</option>
        <option>Vacation</option>
      </select></td>
  </tr>

  <tr>
    <td >Start Time</td>
    <td><select size="1" name="starthour">
      <option value="none" selected>-</option>
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
       
      </select>


      <select size="1" name="startmin">
      <option value='none' selected>-</option>
      <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
        <option>32</option>
        <option>33</option>
        <option>34</option>
        <option>35</option>
        <option>36</option>
        <option>37</option>
        <option>38</option>
        <option>39</option>
        <option>40</option>
        <option>41</option>
        <option>42</option>
        <option>43</option>
        <option>44</option>
        <option>45</option>
        <option>46</option>
        <option>47</option>
        <option>48</option>
        <option>49</option>
        <option>50</option>
        <option>51</option>
        <option>52</option>
        <option>53</option>
        <option>54</option>
        <option>55</option>
        <option>56</option>
        <option>57</option>
        <option>58</option>
        <option>59</option>
       
      </select>
</td>
  </tr>
  <tr>
    <td >Start Date</td>
    <td><select size="1" name="startday">
        <option value="none" selected>-</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>

      </select><select size="1" name="startmonth">
        <option value="none" selected>-</option>
        <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="00">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>

      </select><select size="1" name="startyear">
        <option value="none" selected>-</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
        <option>2006</option>

      </select></td>
  </tr>
  <tr>
    <td >End Time</td>
    <td><select size="1" name="endhour">
        <option value="none" selected>-</option>
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>

      </select><select size="1" name="endmin">
        <option value="none" selected>-</option>
        <option>00</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
        <option>32</option>
        <option>33</option>
        <option>34</option>
        <option>35</option>
        <option>36</option>
        <option>37</option>
        <option>38</option>
        <option>39</option>
        <option>40</option>
        <option>41</option>
        <option>42</option>
        <option>43</option>
        <option>44</option>
        <option>45</option>
        <option>46</option>
        <option>47</option>
        <option>48</option>
        <option>49</option>
        <option>50</option>
        <option>51</option>
        <option>52</option>
        <option>53</option>
        <option>54</option>
        <option>55</option>
        <option>56</option>
        <option>57</option>
        <option>58</option>
        <option>59</option>

      </select></td>
  </tr>
  <tr>
    <td >End Date</td>
    <td><select size="1" name="endday">
        <option value="none" selected>-</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>

      </select><select size="1" name="endmonth">
        <option value="none" selected>-</option>
      <option value="01">January</option>
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="00">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>

      </select><select size="1" name="endyear">
        <option value="none" selected>-</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
        <option>2006</option>

      </select></td>
  </tr>
  <tr>
    <td >Repeat</td>
    <td><select size="1" name="repeat">
        <option value="none" selected>Never</option>
        <option>Daily</option>
        <option>Weekly</option>
        <option>Monthly</option>
        <option>Yearly</option>

      </select></td>
  </tr>
  <tr>
    <td >Contact</td>
    <td><select name="contact" size="1"></select></td>
  </tr>
  <tr>
    <td >Details</td>
    <td><p><textarea rows="2" name="details" cols="90%"></textarea></p>
</td>
  </tr>
  <tr>
    <td width="100%" colspan="2" align="center">

<table border="0"  cellspacing="0" cellpadding="2"> <tr> <td><input type="submit" value="Save" name="save"></form></td>
<td>
<FORM>
<?
echo "<input type='button' onClick=\"parent.main.location='diary.php?year=".$year."& month=".$month."& day=".$day."'\" value='Cancel'>";
?>
</form></td></tr></table></td>

  </tr>
</table>
</body>

</html>
0
Comment
Question by:ma9csw
  • 2
  • 2
5 Comments
 
LVL 5

Expert Comment

by:andriv
ID: 6892235
If you want it done on selection you can do it with Javascript.  How are you basing what is displayed in the other boxes? If you select Appointment what do you want to set in the other selects and if they select Non-Timed Event then waht will be set.
0
 

Author Comment

by:ma9csw
ID: 6892329
if i select appointment i want to see all the other drop downs but if i select vacation for instance i do not want to see the ones relating to start time and end time.

caz
0
 
LVL 5

Accepted Solution

by:
andriv earned 100 total points
ID: 6892423
The best and easiest way to handle it is first display the first select option (type) then when they click on the submit it will display the selects that pertain to that function.
If you want it to all take place on one page includeing the 'type' you will have to use JavaScript and the best you can do is disable the selects that are not needed.

After they submit the type you use conditional statements to decide which ones to display on step two:

if($type=='Appointment')
{
?>

<select name='...

...

If you need more help with this let me know.
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 6894270
You could use JavaScript to construct the entries that are appropriate to each <select>.

This code is from the Netscape Developer's pages.

Add an option with the Option constructor. The following example creates two Select objects, one with and one without the MULTIPLE attribute. No options are initially defined for either object. When the user clicks a button associated with the Select object, the populate function creates four options for the Select object and selects the first option.

<SCRIPT>function populate(inForm) {   colorArray = new Array("Red", "Blue", "Yellow", "Green")
   var option0 = new Option("Red", "color_red")   var option1 = new Option("Blue", "color_blue")   var option2 = new Option("Yellow", "color_yellow")   var option3 = new Option("Green", "color_green")
   for (var i=0; i < 4; i++) {      eval("inForm.selectTest.options[i]=option" + i)      if (i==0) {         inForm.selectTest.options[i].selected=true      }   }
   history.go(0)}</SCRIPT>
<H3>Select Option() constructor</H3><FORM><SELECT NAME="selectTest"></SELECT><P><INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)"><P></FORM>
<HR><H3>Select-Multiple Option() constructor</H3><FORM><SELECT NAME="selectTest" multiple></SELECT><P><INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)"></FORM>

Regards,

Richard Quadling.
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 6894283
Eek. Sorry about that mess.

Here is it again.

Add an option with the Option constructor. The following example creates two Select objects, one with and one without the MULTIPLE attribute. No options are initially defined for either object. When the user clicks a button associated with the Select object, the populate function creates four options for the Select object and selects the first option.

<SCRIPT>
function populate(inForm)
{
colorArray = new Array("Red", "Blue", "Yellow", "Green");
var option0 = new Option("Red", "color_red");
var option1 = new Option("Blue", "color_blue");
var option2 = new Option("Yellow", "color_yellow");
var option3 = new Option("Green", "color_green");
for (var i=0; i < 4; i++)
     {
          eval("inForm.selectTest.options[i]=option" + i);
          if (i==0)
               {
               inForm.selectTest.options[i].selected=true;
               }
          }
history.go(0)
}
</SCRIPT>

And 2 examples of usage

<H3>Select Option() constructor</H3>
<FORM>
     <SELECT NAME="selectTest"></SELECT>
     <P><INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)"><P>
</FORM>


<H3>Select-Multiple Option() constructor</H3>
<FORM>
     <SELECT NAME="selectTest" multiple></SELECT>
     <P><INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)">
</FORM>
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article discusses four methods for overlaying images in a container on a web page
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now