JavaScript set selected on load Feb13 '06

"Pre-selecting" form values

HTML select lists, radio buttons, and checkboxes allow you to set an attribute which "pre-selects" a specific value:

selected="selected"

... or:

checked="checked"

Using these attributes, you can set a "preset" value, for the user. In other words, when the user first views the form, certain values may already be selected for them:

Now, why would anyone want their form values pre-selected?

A few reasons, actually:

1. The option that is pre-selected could be an option that is typically selected, anyway. So, this could possibly save the user a step.
2. Having an option pre-selected protects against "user error," in a situation where the user may have forgot to select an option (and tried to submit the form). (Of course, this is pretty "brash," because it assumes the user would have wanted that option, anyway - when, in truth, it might be better to give them an error, showing them which field was left blank - essentially bringing it to their attention.)
3. Based on other form field inputs, certain values may need to be pre-selected, or "auto-selected," simply because it may match certain criteria.

Example select list: months

Let’s take an example select list, where the user must select a month:

<select id="month">

	<option id="january" value="january">January</option>
	<option id="february" value="february">February</option>
	<option id="march" value="march">March</option>
	<option id="april" value="april">April</option>
	<option id="may" value="may">May</option>
	<option id="june" value="june">June</option>
	<option id="july" value="july">July</option>
	<option id="august" value="august">August</option>
	<option id="september" value="september">September</option>
	<option id="october" value="october">October</option>
	<option id="november" value="november">November</option>
	<option id="december" value="december">December</option>

</select>

Highlight the current month

By default, when the page loads, the first option highlighted, in this select list, will be January, since that’s the first option in the HTML code.

But, what if we’d like to save the user a step, and automatically have the current month highlighted?

Within our HTML, we could simply apply the selected attribute to the current month:

<option id="february" value="february" selected="selected">February</option>

There. Done. Entry finished. Go eat some cake.

Actually, not quite. What if I don’t want to go into the HTML, at the end of every month, and manually change the selected attribute? That would be silly and pointless, when we can have the computer do it for us.

More specifically, we can either have a server-side programming language do it - or we could have JavaScript do it.

Server-side approach

The server-side approach works fine, but it’s a bit more long-winded than JavaScript.

First, we find the current month (I’ll use PHP, for this example):

$month = date("F");

Next, we create an array with each month as a value:

$months_array = array(

	"january",
	"february",
	"march",
	"april",
	"may",
	"june",
	"july",
	"august",
	"september",
	"october",
	"november",
	"december"

);

Next, we loop through our array, and write out the entire select list:

<select id="month"> <?php /* We already know how many array items there are, so we can just use 11 as the max. Otherwise we'd use: $length = count( $months_array ); */ for ( $i = 0; $i < 11; $i++ ) { if ( $months_array[i] == strtolower($month) ) { echo "\t<option value=\"" . $months_array[i] . "\" selected=\"selected\">" . $month . "</option>\n" } else { echo "\t<option value=\"" . $months_array[i] . "\">" . ucwords( $months_array[i] ) . "</option>\n" } } ?> </select>

For the current month of February, this code would result in:

<select id="month"> <option id="january" value="january">January</option> <option id="february" value="february" selected="selected">February</option> <option id="march" value="march">March</option> <option id="april" value="april">April</option> <option id="may" value="may">May</option> <option id="june" value="june">June</option> <option id="july" value="july">July</option> <option id="august" value="august">August</option> <option id="september" value="september">September</option> <option id="october" value="october">October</option> <option id="november" value="november">November</option> <option id="december" value="december">December</option> </select>

This isn’t so bad, I guess - but consider the situation where you’d like to store your select list HTML, and echo it on another part of the page. The above code would not work, in this case, since we echo it immediately.

To solve this problem, we could store the above code in a function or class (but I won’t get into that code, now...).

I’d rather move on to my "preferred approach" for automatically setting the selected attribute: JavaScript.

JavaScript/DOM approach

First, we find the current month:

var months = new Array(12)

months[0] = "january";
months[1] = "february";
months[2] = "march";
months[3] = "april";
months[4] = "may";
months[5] = "june";
months[6] = "july";
months[7] = "august";
months[8] = "september";
months[9] = "october";
months[10] = "november";
months[11] = "december";

var date_now = new Date();
var month_now = date_now.getMonth();

Next, we set the select list to a variable, for easy reference:

var monthList = document.getElementById("month");

Next, we grab the <option> element that correlates with the current month, and we get this by using our array (months), which values match the id attributes of the <option> elements:

var curMonthOption = document.getElementById( months[month_now] );

And finally, we simply change that <option> value’s selected attribute to true:

curMonthOption.selected = true;

That’s it.

Here is an example of a select list, that always shows the current month:

January February March April May June July August September October November December

Just make sure you include this code as a result of the page loading initially (onLoad, or whatever you use to capture the load event).

Which approach is better?

Either approach works the same. I prefer the client-side (JavaScript) approach, because it allows more freedom, but it’s entirely up to you.

Categories: JavaScript , PHP

Add Feedback (view all)