Date of birth selectbox in form script 2

[jasc2k]

Hi All,

I do not typically program using javascript however I have built a form that requires your date of birth being entered where I have used select boxes. When the user selects a month the script will work out how many days in that month and then populate the days selectbox and then on to the year.

It was working fine when I had it inside the same page as the form but know I have moved the function to an external file its stopped.
It could probably do with a clean up but this first problem is beyond me.

Form:

<select class="select" name="month" onBlur="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
			
<select class="select" name="day" id="day">
<option value="na">Day</option>
</select>
			
<select class="select" name="year" id="year">
<option value="na">Year</option>
</select>

Javascript function:

function changeDate(i){
	var e = document.getElementById('day');
	while(e.length>0){
		e.remove(e.length-1);
		var j=-1;
		if(i=="na")
			day_count=0;
		else if(i==2)
			day_count=29;
		else if(i==4||i==6||i==9||i==11)
			day_count=30;
		else
			day_count=31;
		while(j++<day_count){
			var s=document.createElement('option');
			var e=document.getElementById('day');
			if(j==0){
				s.text="Day";
				s.value="na";
				try{
					e.add(s,null);}
					catch(ex){
					e.add(s);}}
			else{
				if(j<10){
					j="0" + j;}
				s.text=j;
				s.value=j;
				try{
					e.add(s,null);}
					catch(ex){
					e.add(s);}}}}
	var y = 2010;
	while (y-->1909){
		var s = document.createElement('option');
		var e = document.getElementById('year');
		s.text=y;
		s.value=y;
	try{
		e.add(s,null);}
		catch(ex){
		e.add(s);}}

Thanks in advance
James

 

[vacunita]

Do you get any errors?
How are you including the external file?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

Some common errors when including external JS files are:

- Including <script> directives inside your external JS file. These are not valid and should be removed.

- Including HTML comments for older browsers inside your script file without JS-style comments preceding them (i.e. "<!--" and "-->"). These are also not valid and should be removed.

- Including the script file and putting JS inside the SCRIPT element, e.g:

<script type="text/javascript" src="whatever.js">
   // Code here would be completely invalid
</script>

- Not using the correct path to the JS file

- Not using the correct type for the JS file ("text/javascript" is correct, but "foo/bar" would not be, for example)

- Not using the correct case for the filename on an OS that has case-sensitive filenames (e.g. "wibble.js" is NOT the same as "Wibble.js")

- Not waiting for elements to be loaded before the script file is trying to reference them. Fix this by using the onload event, or by moving your SCRIPT includes to the very bottom of the BODY element (the onload event is good, but for more advanced techniques, investigate contentReady and documentReady).

As Phil has already mentioned, seeing how you are including the file, as well as any errors would aid debugging this... so have you used Firefox and checked the error console? It's very good at showing meaningful errors.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[jasc2k]

I have included my .js file using the following code - there are no script tags in this file either.

<script language="javascript" type="text/javascript" src="scripts/core.js"></script>

I have not tried firefox but I think I will have to install it soon to test with too. Interestingly I beleive the problem lies with your comment about <!-- comment tags as my dreamweaver does not like the line "while (y-->1909){"
My IE also displays an error on line 64 - object null this is the last line of my script "e.add(s);}}" (apologies for not picking up on that already)

Thanks

 

[vacunita]

It might be just a typo when copying in here, but your code is missing a closing curly brace at the end to terminate your function.


Other than that, your code seems to have a logic flaw, as it just never stops running. Firefox issued a warning when I tried to run it, and when I finally stopped I had several loops worth of day values in the Day drop down.

Your While loop that removes the elements from the Day drop down contains the loop that adds your elements to same drop-down based on the month chosen.

So your code will never stop running. Each time you remove a day, your code ads a month's worth of days to the same drop down.

[gray]while(e.length>0)[COLOR=white red]{[/color]
        e.remove(e.length-1);
        var j=-1;
        if(i=="na")
            day_count=0;
        else if(i==2)
            day_count=29;
        else if(i==4||i==6||i==9||i==11)
            day_count=30;
        else
            day_count=31;
        while(j++<day_count){
            var s=document.createElement('option');
            var e=document.getElementById('day');
            if(j==0){
                s.text="Day";
                s.value="na";
                try{
                    e.add(s,null);}
                    catch(ex){
                    e.add(s);}}
            else{
                if(j<10){
                    j="0" + j;}
                s.text=j;
                s.value=j;
                try{
                    e.add(s,null);}
                    catch(ex){
            e.add(s);}}}[COLOR=white red]}[/color]       [/gray]

Seems you need to change the location of one of the curly braces also.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jasc2k]

thanks for your ocmments I had missed out that curley brace in my script but also I see what you mean by the logic flaw but cannot think of how to change it? However I did think someone else must have done this better than me so found the code below

http://javascript.internet.com/time-date/date-selector.html

would really appreciate someones thoughts on how good that script would be instead of my own?

Thanks again, James

 

[vacunita]

Your code worked well when I fixed that issue. Just close your "While" loop right after the e.remove line and it should be fine.

[gray]
while(e.length>0)[COLOR=white red]{[/color]
        e.remove(e.length-1);
[COLOR=white red]}[/color]
        var j=-1;
        if(i=="na")
            day_count=0;
        else if(i==2)
            day_count=29;
        else if(i==4||i==6||i==9||i==11)
            day_count=30;
        else
            day_count=31;
        while(j++<day_count){
            var s=document.createElement('option');
            var e=document.getElementById('day');
            if(j==0){
                s.text="Day";
                s.value="na";
                try{
                    e.add(s,null);}
                    catch(ex){
                    e.add(s);}}
            else{
                if(j<10){
                    j="0" + j;}
                s.text=j;
                s.value=j;
                try{
                    e.add(s,null);}
                    catch(ex){
            e.add(s);}}} [/gray]
[green]\\Removed closing curly brace from here, and moved it to the top just under the e.remove() call.       [/green]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jasc2k]

Hi vacunita,

I have implemented your change and all seems great now. Thank you so much for your help - I was debating added leap years into the mix but I think I may leave it until I gain more experiance lol

Thanks again,
James

 

[BillyRayPreachersSon]

Leap years are fairly easy to do, and there are two common methods you'll see around:

1) Testing the divisibility of the year, and

2) Using the JS Date object to do the work for you.

Personally, I prefer the latter, as it doesn't involve having to remember the nitty-gritty of the forumla.

The JS date object has nice behaviour when setting incorrect dates. For example, if I try to create a Date object with the date 32-Jan-2010 (new Date(2010, 0, 32)), the Date object will be created, but when you read it back, it will contain the date 01-Feb-2010.

As you can see, it has taken the number of days after the end of the month, and simply wrapped them round to the next month.

This can be used to easily detect leap years by trying to set the date to 29-Feb-year and then reading the month back to see if it in February or not.

Much simpler than remembering a formula, IMHO.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[jasc2k]

Hey Dan,

Great thanks for the info I was not looking forward to the formula idea though I did not realize there was another way around - I look forward to trying that on the weekend!

Thanks
James