JS vaidation for dropdowns

@sanjuTMay 22.2003

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!!!

to post a comment

JavaScript

20 Comments(s) _↴

@JonaMay 22.2003 — #[b][font=arial][color=maroon]Hmmm.... It's possible.. I'm pretty sure...[/color][/font][/b]

@JonaMay 22.2003 — #[b][font=arial][color=maroon]You'd just use something like...[/color][/font][/b]

[font=courier new]

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;}

[/font]

@sanjuTauthorMay 22.2003 — #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.

@JonaMay 22.2003 — #[b][font=arial][color=maroon]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[/color][/font][/b]

[font=courier new]

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;

}

[/font]

@sanjuTauthorMay 22.2003 — #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; 
   }

@JonaMay 22.2003 — #[b][font=arial][color=maroon]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.[/color][/font][/b]

@sanjuTauthorMay 22.2003 — #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?

@JonaMay 22.2003 — #[b][font=arial][color=maroon]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.[/color][/font][/b]

@sanjuTauthorMay 22.2003 — #i keep getting this error:

timeOption1.split is not a function.

are u familiar with why i would get this?

@JonaMay 22.2003 — #[b][font=arial][color=maroon]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?[/color][/font][/b]

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

[upl-file uuid=0b8277a4-518d-4d8a-9bec-0095fcb909a1 size=10kB]meetingspace.zip[/upl-file]

@JonaMay 22.2003 — #[b][font=arial][color=maroon]Here you go...[/color][/font][/b]

[upl-file uuid=a00d31df-7762-4ee6-8ca6-4154ddaa57ac size=11kB]foodmeetingspace.zip[/upl-file]

@sanjuTauthorMay 22.2003 — #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!

@JonaMay 22.2003 — #[b][font=arial][color=maroon]You can do whatever you like, my code works in IE6. Just change it a little for NN4.[/color][/font][/b]

@sanjuTauthorMay 22.2003 — #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!!!

@JonaMay 22.2003 — #[b][font=arial][color=maroon]Hmmmm.... Really? I'll have to take a look at that. Probably because... Oh wait, I think I know... Just a sec..[/color][/font][/b]

@JonaMay 22.2003 — #[b][font=arial][color=maroon]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...[/color][/font][/b]

@JonaMay 22.2003 — #[b][font=arial][color=maroon]I supposed it'd help some if I attached the code... lol ?[/color][/font][/b]

[upl-file uuid=99648f2b-1102-41dc-b15b-055bb479c6a1 size=11kB]foodmeetingspace.zip[/upl-file]

@sanjuTauthorMay 22.2003 — #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!!?

@JonaMay 22.2003 — #[b][font=arial][color=maroon]OK, cool.[/color][/font][/b]

Also in #JavaScript _↴

Webpage ScreenSaver...article forms...help me fix this error in my code

Success!

Help @sanjuT spread the word by sharing this article on Twitter...

Tweet This

JS vaidation for dropdowns

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JS vaidation for dropdowns

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴