JS vaidation for dropdowns

[sanjuT]

i have a form, and one part has 2 dropdowns (starting time & ending time).

Is it possible to validate other dropdowns in the form (for time) to make sure that they are within the starting and ending time specified in the 2 previous dropdowns?

here is the codefor the dropdowns:
<font face="Arial, Helvetica, sans-serif" size="2"><select name="StartingTime">
<option value="start"><font face="Arial, Helvetica, sans-serif" size="2">Select
a Time...</font></option>
<option>7AM</option>
<option>7:15AM</option>
<option>7:30AM</option>
<option>7:45AM</option>
<option>8AM</option>
<option>8:15AM</option>
<option>8:30AM</option>
<option>8:45AM</option>
<option>9AM</option>
<option>9:15AM</option>
<option>9:30AM</option>
<option>9:45AM</option>
<option>10AM</option>
<option>10:15AM</option>
<option>10:30AM</option>
<option>10:45AM</option>
<option>11AM</option>
<option>11:15AM</option>
<option>11:30AM</option>
<option>11:45AM</option>
<option>12PM</option>
<option>12:15PM</option>
<option>12:30PM</option>
<option>12:45PM</option>
<option>1PM</option>
<option>1:15PM</option>
<option>1:30PM</option>
<option>1:45PM</option>
<option>2PM</option>
<option>2:15PM</option>
<option>2:30PM</option>
<option>2:45PM</option>
<option>3PM</option>
<option>3:15PM</option>
<option>3:30PM</option>
<option>3:45PM</option>
<option>4PM</option>
<option>4:15PM</option>
<option>4:30PM</option>
<option>4:45PM</option>
<option>5PM</option>
<option>5:15PM</option>
<option>5:30PM</option>
<option>5:45PM</option>
<option>6PM</option>
<option>6:15PM</option>
<option>6:30PM</option>
<option>6:45PM</option>
<option>7PM</option>
<option>7:15PM</option>
<option>7:30PM</option>
<option>7:45PM</option>
<option>8PM</option>
<option>8:15PM</option>
<option>8:30PM</option>
<option>8:45PM</option>
<option>9PM</option>
<option>9:15PM</option>
<option>9:30PM</option>
<option>9:45PM</option>
<option>10PM</option>
</select></font>

This format is used for all the dropdowns. I just do not know how to validate for the times. I think if i used an option value for each time it would be possible, but that would make it harder to convert them back to the right time, or would it?

ANY help or sugesstions are greatly appreciated!
THANKS!!!

[Jona]

Hmmm.... It's possible.. I'm pretty sure...

[Jona]

You'd just use something like...


if(parseInt(document.theform.theselect.options[document.theform.theselect.options.selectedIndex].text.substring(0,1)) >= parseInt(document.theform.thesecondselect.options[document.theform.thesecondselect.options.selectedIndex].text.substring(0,1))){ alert("Invalid."); return false;}

[sanjuT]

so it would know that 6:45AM is before 6:45PM?

or that 3:15 is before 3:45?

i thought the colon in the time would mess things up.

[Jona]

It will. But I just did it by the hour rather than by the minute. This should work for by the minute, but I haven't tested it so I don't really know. lol


var timeOption1 = document.formName.selectName.options[document.formName.selectName.options.selectedIndex].text
timeOption1 = timeOption1.split(":");
timeOption1_2 = timeOption1;
timeOption1 = timeOption1.split("am");
timeOption1 = timeOption1.split("pm");
//do the same thing for timeOption2
if(parseInt(timeOption1 + timeOption1_2) >= parseInt(timeOption2 + timeOption2_2)){
alert("Invalid.");
return false;
}

[sanjuT]

this is what i have, but it's not working. i am using Netscape 4.7x, is that why? do i need to enclose this in a function?

//TIME VALIDATION
var timeOption1 = document.Layer11.document.form1.StartingTime.options[document.Layer11.document.form1.StartingTime.options.selectedIndex].text
timeOption1 = timeOption1.split(":");
timeOption1_2 = timeOption1;
timeOption1 = timeOption1.split("am");
timeOption1 = timeOption1.split("pm");

var timeOption2 = document.Layer11.document.form1.EndingTime.options[document.Layer11.document.form1.EndingTime.options.selectedIndex].text
timeOption2 = timeOption2.split(":");
timeOption2_2 = timeOption2;
timeOption2 = timeOption2.split("am");
timeOption2 = timeOption2.split("pm");


if(parseInt(timeOption1 + timeOption1_2) >= parseInt(timeOption2 + timeOption2_2)){
alert("Invalid.");
return false;
}

[Jona]

First, of all, I don't have NN4, so I can't do much to help you. Second, your code is built for NN4 exclusively--try making it work first in a different browser like IE6 or something.. Then come back to it. Third, it should be in a function, yes.

[sanjuT]

i tried it in IE6 by taking out the

document.Layer11

part and it didn't work.

I don't have to do:

var timeOption2 = document.form1.EndingTime.options[document.form1.EndingTime.options.selectedIndex].value

then put in an option value, or does .text work?

[Jona]

Use .text because it's not the value that's got the value. The .text will get the text in between the <option> and </option> tags. That's what we're splitting. Use .text instead of .value. Also, call this function with the onChange() event of the select box.

[sanjuT]

i keep getting this error:

timeOption1.split is not a function.


are u familiar with why i would get this?

[Jona]

That's odd. It thinks that split() if a function method that is self-made... Instead of calling the built-in method split()... Can you post a .zip file so I can take a better look at what we've got thus far?

[sanjuT]

here is the page. the template is not attached properly here, so it may look wierd. but the code should be there.

[Jona]

Here you go...

[sanjuT]

i used an option value (starting from 1) for each time, in both starting and endingtime, then called this function:

function time() {
if ((document.Layer11.document.form1.StartingTime.options[document.Layer11.document.form1.LunchTime.selectedIndex].value) >=(document.Layer11.document.form1.EndingTime.options[document.Layer11.document.form1.EndingTime.selectedIndex].value)) {
alert ("Works");
}
return false;
}

and it seems to work..i can change the option values back to the correct times in my java servlet.

Does this seem like a solution i could use, or is there some unforseen problem?

THANKS for all your help!

[Jona]

You can do whatever you like, my code works in IE6. Just change it a little for NN4.

[sanjuT]

Thanks a lot!!!

i like your way better, less fixing up later
:)

just one thing, when i choose, say, 7:30AM for a starting time and 8AM for an ending time, i get the error message..it seems to not recognize, or properly interpret, the times that are not round numbers..

ANY sugesstions?

U've been a great help jona!!!

[Jona]

Hmmmm.... Really? I'll have to take a look at that. Probably because... Oh wait, I think I know... Just a sec..

[Jona]

I came up with this, but I think we're going about it all the wrong way. Because, 2PM is later than 10AM but its number value is less, it will evaluate to false and therefore disallow the user to choose that time. So we'll have to try something else...

[Jona]

I supposed it'd help some if I attached the code... lol :D

[sanjuT]

so if this fix can't deciper AM and PM, it's probably better to assign an option value to each time, then validate for that..

i can change the times back in my servlet.

Thanks for the help!!:)

[Jona]

OK, cool.