millsy007 Posted February 24, 2009 Share Posted February 24, 2009 I have a page from which the user can select a date (in a text box updated via a calendar) and a time (selected from an options list) I have two links that let the user cycle through the date field. <a href="#" onclick="shiftDate(1, 'down');">Previous</a> <a href="#" onclick="shiftDate(1, 'up');">Next</a> My javascript then changes the date accordingly function shiftDate(days, up_or_down) { date = new Date(document.getElementById('date').value); if (up_or_down == 'up') { date.setDate(date.getDate() + days); } else { date.setDate(date.getDate() - days); } document.getElementById('date').value = (date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear(); GetSchedule(); return false; } This works fine but i need to incorporate the time option too. The time dropdown list has: <select name="time" id="time" style="width:150px"> <option>Select Time</option> <option value="9:00">Morning</option> <option value="12:00">Afternoon</option> <option value="16:00">Evening</option> <option value="22:00">Late</option> </select> What I would like to happen is that when the user clicks the 'next' it firstly updates the time, moving on one option value in the time field, and then only if the option value is <option value="22:00">Late</option> shifting/moving on 1 day. Is this possible? I cant seem to get this functionality working Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 24, 2009 Share Posted February 24, 2009 Here's a generic function that you could use for multiple things: <html> <head> <script> function moveSelectOpt(selID, step) { var selObj = document.getElementById(selID); var newID = (selObj.selectedIndex + step); if (newID>=1 && newID<=(selObj.options.length-1)) { selObj.selectedIndex = newID; } else { selObj.selectedIndex = (newID<=1) ? (selObj.options.length-1): 1 ; } return; } </script> </head> <body> <select name="time" id="time" style="width:150px"> <option>Select Time</option> <option value="9:00">Morning</option> <option value="12:00">Afternoon</option> <option value="16:00">Evening</option> <option value="22:00">Late</option> </select><br> <a href="#" onclick="moveSelectOpt('time', 1);">Next Time</a> <a href="#" onclick="moveSelectOpt('time', -1);">Previous Time</a> </body> </html> Quote Link to comment Share on other sites More sharing options...
millsy007 Posted February 25, 2009 Author Share Posted February 25, 2009 Hi, I added the script but the value that is shown in the time list doesnt update on the screen, do I need to add something so that the value shown is related to the newly assigned index value? Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 25, 2009 Share Posted February 25, 2009 I would have to see how you implemented the script. It works fine within the code I posted above using your exact same select list. Quote Link to comment Share on other sites More sharing options...
millsy007 Posted February 25, 2009 Author Share Posted February 25, 2009 Works now, error on my behalf, thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 25, 2009 Share Posted February 25, 2009 Please mark topic as solved Quote Link to comment 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.