Start Time and End Time Validation

afaheem
New Member
Join Date: Sep 2008
Posts: 10
Start Time and End Time Validation

Oct 24 '08, 08:16 PM
I have select boxes for starttime and endtime in hours, minutes and AM/PM.
I need to validate the time so that end time should be greater than start time.
The AM and PM should also be validated.

Any help appreciated !

below is my code
Code:
<HTML>
 <HEAD>
 <script>
function checkTime(){
		    var startTimeValue = document.getElementById("startTime");
			var endTimeValue = document.getElementById("endTime");
		   
			if( startTimeValue.options[startTimeValue.selectedIndex].value > endTimeValue.options[endTimeValue.selectedIndex].value) {
				alert("End Time should be greater than Start Time");
				return false;
			}
			
			return true;
	
	    }
	
</script>
 <BODY>
  <table cellpadding="0" cellspacing="0" border="0" >
                                <tr>
								<td> Start Time:</td>
                                    <td>
                                        <select style="font-size: 9pt;" id="startTime" onchange="checkTime()">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option> 
                                            <option value="12">12</option>                                                                                                                                                                                 
                                        </select></td>
										<td>
	                                        <select dataSource="actionForm.fromMinutes" style="font-size: 9pt;">
	                                            <option value="0">00</option>
	                                            <option value="1">01</option>
	                                            <option value="2">02</option>
	                                            <option value="3">03</option>
	                                            <option value="4">04</option>
	                                            <option value="5">05</option>
	                                            <option value="6">06</option>
	                                            <option value="7">07</option>
	                                            <option value="8">08</option>
	                                            <option value="9">09</option>
												<option value="9">10</option>
												<option value="9">11</option>
												<option value="9">12</option>
												<option value="9">13</option>
												<option value="9">14</option>
												<option value="9">15</option>
												<option value="9">16</option>
												<option value="9">17</option>
												<option value="9">18</option>
												<option value="9">19</option>
												<option value="9">20</option>
												<option value="9">21</option>
												<option value="9">22</option>
												<option value="9">23</option>
												<option value="9">24</option>
												<option value="9">25</option>
												<option value="9">26</option>
												<option value="9">27</option>
												<option value="9">28</option>
												<option value="9">29</option>
												<option value="9">30</option>
												<option value="9">31</option>
												<option value="9">32</option>
												<option value="9">33</option>
												<option value="9">34</option>
												<option value="9">35</option>
												<option value="9">36</option>
												<option value="9">37</option>
												<option value="9">38</option>
												<option value="9">39</option>
												<option value="9">40</option>
												<option value="9">41</option>
												<option value="9">42</option>
												<option value="9">43</option>
												<option value="9">44</option>
												<option value="9">45</option>
												<option value="9">46</option>
												<option value="9">47</option>
												<option value="9">48</option>
												<option value="9">49</option>
												<option value="9">50</option>
												<option value="9">51</option>
												<option value="9">52</option>
												<option value="9">53</option>
												<option value="9">54</option>
												<option value="9">55</option>
												<option value="9">56</option>
												<option value="9">57</option>
												<option value="9">58</option>
												<option value="9">59</option>
												<option value="9">60</option>

						</select>
	                                    </td>
										<td>
											<select dataSource="actionForm.startampm" style="font-size: 9pt;">
	                                       		<option value="0">AM</option>
	                                         	<option value="1">PM</option>                                          
											</select>
                                    	</td>
									
                                    <td>&nbsp; End Time:</td>
                                      <td style="padding-left: 10px;">
	                                        <select style="font-size: 9pt;" id="endTime" onchange="checkTime()">
												<option value="1">1</option>
	                                            <option value="2">2</option>
	                                            <option value="3">3</option>
	                                            <option value="4">4</option>
	                                            <option value="5">5</option>
	                                            <option value="6">6</option>
	                                            <option value="7">7</option>
	                                            <option value="8">8</option>
	                                            <option value="9">9</option>
	                                            <option value="10">10</option>
	                                            <option value="11">11</option>
	                                            <option value="12">12</option>                                                                                                                                                                                 
	                                        </select>
	                                    </td>
										  <td>
	                                        <select dataSource="actionForm.toMinutes" style="font-size: 9pt;">
	                                            <option value="0">00</option>
	                                            <option value="1">01</option>
	                                            <option value="2">02</option>
	                                            <option value="3">03</option>
	                                            <option value="4">04</option>
	                                            <option value="5">05</option>
	                                            <option value="6">06</option>
	                                            <option value="7">07</option>
	                                            <option value="8">08</option>
	                                            <option value="9">09</option>
												<option value="9">10</option>
												<option value="9">11</option>
												<option value="9">12</option>
												<option value="9">13</option>
												<option value="9">14</option>
												<option value="9">15</option>
												<option value="9">16</option>
												<option value="9">17</option>
												<option value="9">18</option>
												<option value="9">19</option>
												<option value="9">20</option>
												<option value="9">21</option>
												<option value="9">22</option>
												<option value="9">23</option>
												<option value="9">24</option>
												<option value="9">25</option>
												<option value="9">26</option>
												<option value="9">27</option>
												<option value="9">28</option>
												<option value="9">29</option>
												<option value="9">30</option>
												<option value="9">31</option>
												<option value="9">32</option>
												<option value="9">33</option>
												<option value="9">34</option>
												<option value="9">35</option>
												<option value="9">36</option>
												<option value="9">37</option>
												<option value="9">38</option>
												<option value="9">39</option>
												<option value="9">40</option>
												<option value="9">41</option>
												<option value="9">42</option>
												<option value="9">43</option>
												<option value="9">44</option>
												<option value="9">45</option>
												<option value="9">46</option>
												<option value="9">47</option>
												<option value="9">48</option>
												<option value="9">49</option>
												<option value="9">50</option>
												<option value="9">51</option>
												<option value="9">52</option>
												<option value="9">53</option>
												<option value="9">54</option>
												<option value="9">55</option>
												<option value="9">56</option>
												<option value="9">57</option>
												<option value="9">58</option>
												<option value="9">59</option>
												<option value="9">60</option>


	                                             </select>
	                                        </td>
									<td>
                                        <select dataSource="actionForm.endampm" style="font-size: 9pt;">
                                          	<option value="0">AM</option>
                                         	<option value="1">PM</option>
                                        </select>                                       
                                    </td>
                         
										
										
										
										
										
										</tr>
                            </table>
 </BODY>
</HTML>
Tags: None
zaphod42

New Member

Join Date: Oct 2008

Posts: 55
#2

Oct 24 '08, 09:09 PM

the value of the select boxes is a string right now, try this:

Code:

var start=startTimeValue.options[startTimeValue.selectedIndex].value*1 var end=endTimeValue.options[endTimeValue.selectedIndex].value*1 if( start > end)

javascript will try to preform the math (*1), and will change the "string" to actual numbers if there aren't any letters in it:) There is a little more logic involved for you to make this work right, but that should get you started:)
Comment
Start Time and End Time Validation

Start Time and End Time Validation

Comment
