[SOLVED] Little Javascript issue with forms.

Twister1004 · June 29, 2009

Hey everyone! I'm currently working on a form with Javascript. (Although the information is sent to the database by PHP.)

Objective: When the first field is on "February" I want it to display only 28 days. However, every other month will have 31 days (Just to keep it simple).

Problem: Some reason it wont pick up as the field being in February and change the amount of days to 28. I've tried to research it, but I think I am messing up by how I'm calling it out, but I wanna make sure.

<script type="text/javascript">
function getdayFeb(){
var Day = 1;
if(document.thisForm.month.value == "February"){
	while(Day <= 28){
		document.write("<option value='"+Day+"'>"+Day+"</option>");
		++Day;
	}
}
else{
	while(Day <=31){
		document.write("<option value='"+Day+"'>"+Day+"</option>");
		++Day;
	}
}
}
</script>

--------Form----------
<form method="post" action="" name="thisForm">
		<table>
			<tr>
				<td>
					Username:
				</td>
				<td>
					<input type="text" name="user" maxlength="20" />
				</td>
			</tr>
			<tr>
				<td>
					Password:
				</td>
				<td>
					<input type="password" name="pass1" maxlength="20"/>
				</td>
			</tr>
			<tr>
				<td>
					Verify Password:
				</td>
				<td>
					<input type="password" name="pass2" maxlength="20"/>
				</td>
			</tr>
			<tr>
				<td>
					E-mail:
				</td>
				<td>
					<input type="text" name="email" maxlength="100" />
				</td>
			</tr>
			<tr>
				<td>
					Gender:
				</td>
				<td>
					<select name="gender">
						<option value="Male">Male</option>
						<option value="Female">Female</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Date of Birth
				</td>
				<td>
					<select name="month">
						<option value="January">January</option>
						<option value="February">February</option>
						<option value="March">March</option>
						<option value="April">April</option>
						<option value="May">May</option>
						<option value="June">June</option>
						<option value="July">July</option>
						<option value="August">August</option>
						<option value="September">September</option>
						<option value="October">October</option>
						<option value="November">November</option>
						<option value="December">December</option>
					</select>
					<select name="day">
						<script type="text/javascript">getdayFeb();</script>
					</select>
					<select name="year">
						<?php
						$thisYear = date("Y");
						while($thisYear >= 1900){
							echo "<option value=\"$thisYear\">$thisYear</option>";
							--$thisYear;
						}
						?>
					</select>
				</td>
			<tr>
				<td>
					<input type="checkbox" name="agree" value="1" />
				</td>
				<td>
					I agree to all the rules and clearly state to follow them.<br/>
					I also agree that if I violate the rules, my account could be suspended or deleted.<br/>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" name="register" value="Register" />
				</td>
			</tr>
		</table>
	</form>

All help is appreciated!

Thank you.

corbin · June 29, 2009

Have you tried alerting to see what the value is?

Twister1004 · June 29, 2009

I have. No matter what happens, it always shows 31 days.

Psycho · June 29, 2009

There are several problems with what you are trying to do.

1. You should write the options out before the javascript is run. Otherwise any user without JavaScript enabled will not be able to use your form

2. You need to execute the function onchange() of the month field.

3. The function currently "writes" to the page - so if you did call it onchange it would wipe out the entire page.

I'll post some code is a bit

Twister1004 · June 29, 2009

<script type="text/javascript">
function getdayFeb(Month){
var Day = 1;
if(Month == "February"){
	while(Day <= 28){
		document.thisForm.day.value.write = ("<option value='"+Day+"'>"+Day+"</option>");
		++Day;
	}
}
else{
	while(Day <= 31){
		document.thisForm.day.value.write = ("<option value='"+Day+"'>"+Day+"</option>");
		++Day;
	}
}
}
</script>
<select name="month" onchange="getdayFeb(this.value);">
						<option value="January">January</option>
						<option value="February">February</option>
						<option value="March">March</option>
						<option value="April">April</option>
						<option value="May">May</option>
						<option value="June">June</option>
						<option value="July">July</option>
						<option value="August">August</option>
						<option value="September">September</option>
						<option value="October">October</option>
						<option value="November">November</option>
						<option value="December">December</option>
					</select>
					<select name="day">
						<script type="text/javascript">getdayFeb();</script>
					</select>

Kinda like this? I'm starting to try other things and trying to research my problem. However, I'm not getting anywhere.

I am still trying to try different things so you know.

1. You should write the options out before the javascript is run. Otherwise any user without JavaScript enabled will not be able to use your form

How would you be able to check if JavaScript is off for that user? Ill just use the alternative to use PHP in that case.

Psycho · June 29, 2009

1. Give all your fields an ID

2. Write out 1-31 options for the days field

3. Give the month field an onchange event

4. Change the values for the month options to numerical values

						<select name="month" id="month" onchange="getdayFeb();">
						<option value="1">January</option>
						<option value="2">February</option>
						<option value="3">March</option>
						<option value="4">April</option>
						<option value="5">May</option>
						<option value="6">June</option>
						<option value="7">July</option>
						<option value="8">August</option>
						<option value="9">September</option>
						<option value="10">October</option>
						<option value="11">November</option>
						<option value="12">December</option>
					</select>
					<select name="day" id="day">
						<?php
						for($day=1; $day<=31; $day++){
							echo "<option value=\"$day\">$day</option>";
						}
						?>
					</select>
					<select name="year" id="year">
						<?php
						$thisYear = date("Y");
						while($thisYear >= 1900){
							echo "<option value=\"$thisYear\">$thisYear</option>";
							--$thisYear;
						}
						?>
					</select>

Add these two JavaScript functions to the head of your page

function daysInMonth(iMonth, iYear)
{
return 32 - new Date(iYear, iMonth, 32).getDate();
}
function getdayFeb(dayID, monthID, yearID)
{
    var month = document.getElementById('month').value - 1;
    var year = document.getElementById('year').value;
    var daysObj = document.getElementById('day');

    var days = daysInMonth(month, year);

    if(daysObj.options.length>days)
    {
        daysObj.options.length = days;
    }
    else if(daysObj.options.length<days)
    {
        var option;
        for(var d=daysObj.options.length; d<days; d++)
        {
            option = new Option(d+1, d);
            daysObj.options[d] = option;
        }
    }
}

Twister1004 · June 29, 2009

Ok let me see about this. I'm kinda confused on how you got some variables in there. Also with some things you've done.

   return 32 - new Date(iYear, iMonth, 32).getDate();

I can guess what that means.... 32 - Date(YEAR, MONTH, DAY)...? Correct?

function getdayFeb(dayID, monthID, yearID)

Why would you need those variables. They don't do with anything O_o.

option = new Option(d+1, d);
daysObj.options[d] = option;

Im confused about that as well. It just goes back a fourth to each other. It just doesnt make any since to me D=.

I Thank you A LOT! However, I don't mean to criticize you, but I'm just very interested to know what how this works.

Psycho · June 29, 2009

Ok let me see about this. I'm kinda confused on how you got some variables in there. Also with some things you've done.
   return 32 - new Date(iYear, iMonth, 32).getDate();
I can guess what that means.... 32 - Date(YEAR, MONTH, DAY)...? Correct?

A complete explanation of how it works can be found here (where I got it from): http://snippets.dzone.com/posts/show/2099 I should have linked it in my above post.

function getdayFeb(dayID, monthID, yearID)
Why would you need those variables. They don't do with anything O_o.

Um, those variables tell me what the field IDs are for the day, month & year fields. You need those to do what it is you want to do. I always try to make my code modular by not hard coding variables into them. By passing the IDs I could use this function on another page with little to no modification.

option = new Option(d+1, d);
daysObj.options[d] = option;
Im confused about that as well. It just goes back a fourth to each other. It just doesnt make any since to me D=.

The first line create a new option to be added to the select list and the second line adds it. It could be written as one line

daysObj.options[d] = new Option(d+1, d);

That code is in place because if the use changes from a month with less days to a month with more days you need to add the appropriate options back.

Twister1004 · June 29, 2009

I'm understanding this better now ^_^

return 32 - new Date(iYear, iMonth, 32).getDate();

Meaming: The Date of ->(year, month, day)<- will go through a process to be grabbed and see how many days are in that month.

function getdayFeb(dayID, monthID, yearID)

So those variables are not needed? I see now. You used getElementById... I didn't see that part.

option = new Option(d+1, d);
daysObj.options[d] = option;

Still figuring out......

What are the values for it though? Option(d+1, d); I'm assuming the first value is the visible date, but the second value is the value of it?

Anyways I'll understand it eventually. Thank you VERY much ^_^ -hugs-[/code]

Psycho · June 29, 2009

function getdayFeb(dayID, monthID, yearID)
So those variables are not needed? I see now. You used getElementById... I didn't see that part.

No they ARE needed.

option = new Option(d+1, d);
daysObj.options[d] = option;
Still figuring out......

What are the values for it though? Option(d+1, d); I'm assuming the first value is the visible date, but the second value is the value of it?

d+1 = the value of the option and d is the index of the value. Indexes start at 0 so in a numerical list that starts at 1, each items index will be 1 less than the value.

Twister1004 · June 29, 2009

Ok..... I see. I'll figure it out and get crackin' ^_^ . I just hope I'll learn Javascript faster than the way it's going now.

Psycho · June 29, 2009

I think I need a correction to the above. It was late when I wrote that code and I didn't have my "stock" scripts available. I was incorrect in thinking the second value is the index. The new otion object works like this:

new Option([text[, value[, defaultSelected[, selected]]]])

If text is entered, then the text is the display text AND the value. you could simply do that in this case, but I always prefer to set values explicitly. Anyway, simply change the for loop in the function to this:

        for(var d=daysObj.options.length+1; d<=days; d++)
        {
            daysObj.options[daysObj.options.length] = new Option(d, d);
        }

Sign In

[SOLVED] Little Javascript issue with forms.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information