« Switch configurations for a PHP script based on the virtual host, taking into account the console and proxies
Get remote ip address in PHP even when the user is behind a proxy »
21 05 2007

Make connected combo boxes to choose a time interval

Posted by: Ori Pekelman in javascript

Ever needed to select in a form a start and an end time (meeting, event etc..) this little bit of code will help you have a default interval (here 2 hours). When the first combo box changes the second one is set to two hours later.
As usual this javascript is unobtrusive and degradable, just call somewhere initHourCombos() to initialize it. Make sure you change the name $('start') and $('end') if your elements have a different id.

PLAIN TEXT
JAVASCRIPT:
  1. /* Make connected combo box 'End' jump 2 hours when combo 'Start' changes
  2. * (c) AF83 2007 Ori Pekelman
  3. * uses code found on http://www.irt.org/script/626.htm
  4. * uses the Prototype library for attaching the event to the combo (you can do without this.. just find the correct element)
  5.  
  6. <label for="start">From :</label>
  7. <select id="start" name="start" class="hour">
  8.   <option value="07:00">07:00</option>
  9.  
  10.   <option value="07:30">07:30</option>
  11.   <option value="08:00">08:00</option>
  12.   <option value="08:30">08:30</option>
  13.   <option value="09:00">09:00</option>
  14.   <option value="09:30">09:30</option>
  15.   <option value="10:00">10:00</option>
  16.  
  17.   <option value="10:30">10:30</option>
  18.   <option value="11:00">11:00</option>
  19.   <option value="11:30">11:30</option>
  20.   <option value="12:00" selected="selected">12:00</option>
  21.   <option value="12:30">12:30</option>
  22.   <option value="13:00">13:00</option>
  23.  
  24.   <option value="13:30">13:30</option>
  25.   <option value="14:00">14:00</option>
  26.   <option value="14:30">14:30</option>
  27.   <option value="15:00">15:00</option>
  28.   <option value="15:30">15:30</option>
  29.   <option value="16:00">16:00</option>
  30.  
  31.   <option value="16:30">16:30</option>
  32.   <option value="17:00">17:00</option>
  33.   <option value="17:30">17:30</option>
  34.   <option value="18:00">18:00</option>
  35.   <option value="18:30">18:30</option>
  36.   <option value="19:00">19:00</option>
  37.  
  38.   <option value="19:30">19:30</option>
  39.   <option value="20:00">20:00</option>
  40.   <option value="20:30">20:30</option>
  41.   <option value="21:00">21:00</option>
  42.   <option value="21:30">21:30</option>
  43.   <option value="22:00">22:00</option>
  44.  
  45.   <option value="22:30">22:30</option>
  46.   <option value="23:00">23:00</option>
  47.   <option value="23:30">23:30</option>
  48.   <option value="24:00">24:00</option>
  49.   <option value="24:30">24:30</option>
  50.   <option value="01:00">01:00</option>
  51.  
  52.   <option value="01:30">01:30</option>
  53.   <option value="02:00">02:00</option>
  54.   <option value="02:30">02:30</option>
  55.   <option value="03:00">03:00</option>
  56.   <option value="03:30">03:30</option>
  57.   <option value="04:00">04:00</option>
  58.  
  59.   <option value="04:30">04:30</option>
  60.   <option value="05:00">05:00</option>
  61.   <option value="05:30">05:30</option>
  62.   <option value="06:00">06:00</option>
  63.   <option value="06:30">06:30</option>
  64. </select>
  65. <label for="end" class="hour">to:</label>
  66. <select id="end" name="end" class="heure">
  67.   <option value="07:00">07:00</option>
  68.   <option value="07:30">07:30</option>
  69.   <option value="08:00">08:00</option>
  70.   <option value="08:30">08:30</option>
  71.  
  72.   <option value="09:00">09:00</option>
  73.   <option value="09:30">09:30</option>
  74.   <option value="10:00">10:00</option>
  75.   <option value="10:30">10:30</option>
  76.   <option value="11:00">11:00</option>
  77.   <option value="11:30">11:30</option>
  78.  
  79.   <option value="12:00">12:00</option>
  80.   <option value="12:30">12:30</option>
  81.   <option value="13:00">13:00</option>
  82.   <option value="13:30">13:30</option>
  83.   <option value="14:00" selected="selected">14:00</option>
  84.   <option value="14:30">14:30</option>
  85.  
  86.   <option value="15:00">15:00</option>
  87.   <option value="15:30">15:30</option>
  88.   <option value="16:00">16:00</option>
  89.   <option value="16:30">16:30</option>
  90.   <option value="17:00">17:00</option>
  91.   <option value="17:30">17:30</option>
  92.  
  93.   <option value="18:00">18:00</option>
  94.   <option value="18:30">18:30</option>
  95.   <option value="19:00">19:00</option>
  96.   <option value="19:30">19:30</option>
  97.   <option value="20:00">20:00</option>
  98.   <option value="20:30">20:30</option>
  99.  
  100.   <option value="21:00">21:00</option>
  101.   <option value="21:30">21:30</option>
  102.   <option value="22:00">22:00</option>
  103.   <option value="22:30">22:30</option>
  104.   <option value="23:00">23:00</option>
  105.   <option value="23:30">23:30</option>
  106.  
  107.   <option value="24:00">24:00</option>
  108.   <option value="24:30">24:30</option>
  109.   <option value="01:00">01:00</option>
  110.   <option value="01:30">01:30</option>
  111.   <option value="02:00">02:00</option>
  112.   <option value="02:30">02:30</option>
  113.  
  114.   <option value="03:00">03:00</option>
  115.   <option value="03:30">03:30</option>
  116.   <option value="04:00">04:00</option>
  117.   <option value="04:30">04:30</option>
  118.   <option value="05:00">05:00</option>
  119.   <option value="05:30">05:30</option>
  120.  
  121.   <option value="06:00">06:00</option>
  122.   <option value="06:30">06:30</option>
  123. </select>
  124.  
  125.  
  126. */
  127. function initHourCombos() {
  128. if ($('start')){
  129. $('start').addEventListener('change',function () {
  130.     $('end').value = addTime (this.value ,"02:00")
  131. },false)}}
  132.  
  133. function addTime(t1,t2){
  134. var m = (t1.substring(0,t1.indexOf(':'))-0) * 60 +
  135.         (t1.substring(t1.indexOf(':')+1,t1.length)-0) +
  136.         (t2.substring(0,t2.indexOf(':'))-0) * 60 +
  137.         (t2.substring(t2.indexOf(':')+1,t2.length)-0);
  138. var h = Math.floor(m / 60);
  139. m=(m - (h * 60));
  140. if (h>24) {h=h-24};
  141. if (m<10) {m='0'+m};
  142. if (h<10) {h='0'+h};
  143.  
  144. t3=(h + ':' + m );
  145.  
  146. return t3;
  147. }

This entry was posted on Monday, May 21st, 2007 at 2:11 pm and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Creative Commons License
This work is licensed under a Creative Commons Attribution 2.0 License.