Solved

select box values

Posted on 2002-03-24
5
167 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:Richard Quadling
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:Richard Quadling
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

820 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