Rizyak said:
I have a form for a user to input an establishment's hours and what time an
event is taking place. After the user inputs their establishment's hours of
operation I want the form elements lower in the form to adjust so that an
event can only happen when the place is open.
Here is one approach to validating the event times:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Verify time fields</title>
<script type="text/javascript">
// ------------------------------------------
function validateAll()
{
alert("in validateAll");
var x = document.forms["myForm"];
var inputOK;
if( x.storeOpen.value == "" )
{
alert("Enter a store open time.");
inputOK= false;
}
else if( x.storeClose.value == "" )
{
alert("Enter a store close time.");
inputOK= false;
}
else if( x.eventStart.value == "" )
{
alert("Enter an event start time.");
inputOK= false;
}
else if( x.eventEnd.value == "" )
{
alert("Enter an event stop time.");
inputOK= false;
}
else
{
inputOK = checkBoth();
}
alert("from validateAll. inputOK = " + inputOK);
return inputOK;
}
// ..............................
function checkBoth()
{
alert("In checkBoth...");
var x = document.forms["myForm"];
var inputOK;
// Convert the times in string format to numeric format
// in minutes.
var storeOpen = convertTime(x.storeOpen.value);
var storeClose = convertTime(x.storeClose.value);
var eventStart = convertTime(x.eventStart.value);
var eventEnd = convertTime(x.eventEnd.value);
alert(".storeOpen.value = " + x.storeOpen.value +
" storeOpen = " + storeOpen +
"\n .storeClose.value = " + x.storeClose.value +
" storeClose = " + storeClose +
"\n .eventStart.value = " + x.eventStart.value +
" eventStart = " + eventStart +
"\n .eventEnd.value = " + x.eventEnd.value +
" eventEnd = " + eventEnd );
if ( eventStart > eventEnd )
{
alert("Event start must be before " +
"or equal to event end.");
x.eventStart.focus();
inputOK = false;
}
else if ( !isBetween(eventStart,storeOpen,storeClose) )
{
alert("Event start must occur " +
"when the store is open.");
x.eventStart.focus();
inputOK = false;
}
else if ( !isBetween(eventEnd,storeOpen,storeClose) )
{
alert("Event end must occur " +
"when the store is open.");
x.eventEnd.focus();
inputOK = false;
}
else
{
inputOK = true;
}
return inputOK;
}
// .....................................
function convertTime(timeString)
{
//Convert to a minute based value.
//Input may either be in 24 hour format
// or am/pm format.
// Examples 8:00am, 8, 8:12, 14:30, 2:30pm, or 4:30P.M.
var theTime = parseInt(timeString,10) * 60;
if ( timeString.indexOf("p") >= 0 ||
timeString.indexOf("P") >= 0 )
{
theTime += 12*60;
}
var minutesIndex = timeString.indexOf(":");
if ( minutesIndex >= 0 )
{
var minutes = timeString.substr(minutesIndex+1);
theTime += parseInt(minutes,10);
}
return theTime;
}
// ......................................
function isBetween(test,a,b)
{
return test>=a && test<=b;
}
</script>
</head>
<body>
<p>Please try out our form.</p>
<form name="myForm"
action="
http://www.notavalidwebaddress.com"
method="POST"
onSubmit="return validateAll();">
<p>Store start time:<br>
<input type="text" name="storeOpen" size="20"><br><br>
Store end time:<br>
<input type="text" name="storeClose" size="20"><br>
</p>
<p>The little event times.</p>
<p>Event start time:<br>
<input type="text" name="eventStart" size="40">
<p>Event end time<br>
<input type="text" name="eventEnd" size="40">
</p>
<p><input type="submit" border="0" value="Submit">
</form>
</body>
</html>
Robert