zed420 Posted August 11, 2009 Share Posted August 11, 2009 Hi All I wonder if someone can help me i don't know much about JavaScript. I'm working on a PHP file, it has two dropdown boxes 'starttime' and 'endtime' I want it so that if someone selected 9am 'starttime' the 'endtime' should change to 10am onwards. so basiclly gap of 1hr. Is this possible with Javascript? many thanks Zed Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/ Share on other sites More sharing options...
Psycho Posted August 11, 2009 Share Posted August 11, 2009 Assuming the select lists go from 12:00am to 11:45pm with 15 minute increments, this will do the job. I only included a few hours worth of times for demonstration purposes. If the increments are NOT in 15 minutes, then you need to change the '4' in the function calculation accordingly (30 minutes would be 2, 10 minutes would be 6, etc). <html> <head> <script type="text/javascript"> function updateEnd(beginIdx) { endSelectObj = document.getElementById('end'); endSelectObj.selectedIndex = (beginIdx+4) % endSelectObj.options.length; } </script> </head> <body> Start: <select name="start" id="start" onchange="updateEnd(this.selectedIndex);"> <option value="8:00">8:00</option> <option value="8:15">8:15</option> <option value="8:30">8:30</option> <option value="8:45">8:45</option> <option value="9:00">9:00</option> <option value="9:15">9:15</option> <option value="9:30">9:30</option> <option value="9:45">9:45</option> <option value="10:00">10:00</option> <option value="10:15">10:15</option> <option value="10:30">10:30</option> <option value="10:45">10:45</option> </select> <br> End: <select name="end" id="end"> <option value="8:00">8:00</option> <option value="8:15">8:15</option> <option value="8:30">8:30</option> <option value="8:45">8:45</option> <option value="9:00">9:00</option> <option value="9:15">9:15</option> <option value="9:30">9:30</option> <option value="9:45">9:45</option> <option value="10:00">10:00</option> <option value="10:15">10:15</option> <option value="10:30">10:30</option> <option value="10:45">10:45</option> </select> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/#findComment-895908 Share on other sites More sharing options...
zed420 Posted August 11, 2009 Author Share Posted August 11, 2009 Thank you very much that is a great help Zed Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/#findComment-895920 Share on other sites More sharing options...
zed420 Posted August 12, 2009 Author Share Posted August 12, 2009 Can I be cheeky and ask you if its possible to gray out the hrs that shouldn't be clicked. e.g. if start time is clicked on 9am the end time box 8 and 9 should be grayed out. is this possible ??? Thanks Zed Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/#findComment-896637 Share on other sites More sharing options...
Psycho Posted August 12, 2009 Share Posted August 12, 2009 Start Option values and end options values are now offset by one hour <?php function createTimeOptions($start, $end) { $options = ''; for ($time=$start; $time<=$end; $time+=.25) { $hours = floor($time); $minutes = ($time-$hours) * 60; $timeStr = date("g:i a", mktime($hours, $minutes, 0, 1, 1, 2000)); $options .= "<option value=\"{$timeStr}\">{$timeStr}</option>\n"; } return $options; } ?> <html> <head> <script type="text/javascript"> function updateEndTime(beginTimeSelectObj) { var beginTimeIdx = beginTimeSelectObj.selectedIndex; var endTimeSelectObj = document.getElementById('end'); endTimeSelectObj.selectedIndex = beginTimeIdx; var optionColor; for (var endTimeIdx=0; endTimeIdx<endTimeSelectObj.options.length; endTimeIdx++) { optionColor = (endTimeIdx<beginTimeIdx) ? '#cecece' : ''; endTimeSelectObj.options[endTimeIdx].style.backgroundColor = optionColor; } return; } function validateEndTime(endTimeSelectObj) { var beginTimeSelectObj = document.getElementById('start'); if (endTimeSelectObj.selectedIndex<beginTimeSelectObj.selectedIndex) { endTimeSelectObj.selectedIndex = beginTimeSelectObj.selectedIndex; } return; } </script> </head> <body> Start: <select name="start" id="start" onchange="updateEndTime(this);"> <?php echo createTimeOptions(8, 22); //8am to 10pm ?> </select> <br> End: <select name="end" id="end" onchange="validateEndTime(this);"> <?php echo createTimeOptions(9, 23); //9am to 11pm ?> </select> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/#findComment-896693 Share on other sites More sharing options...
zed420 Posted August 12, 2009 Author Share Posted August 12, 2009 Thank you mjdamato that is wonderful. Works like charm Zed Quote Link to comment https://forums.phpfreaks.com/topic/169806-solved-two-dropdown-boxes/#findComment-896705 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.