Automatically Updating Dropdowns

Required maintenance: Dropdowns for selecting a year need updating when the year changes.

Otherwise, as an example, at the start of year 2025 you'll have a 2024 dropdown selection for scheduling an event in the future.

During year 2024, the dropdown might have these selections:

2024
2025
2026
2027
2028

When year 2025 comes around, the dropdown needs these selections:

2025
2026
2027
2028
2029

There are two ways to automatically update "year" dropdown lists when a new year starts – with JavaScript and with PHP.

Auto-updating "Year" Dropdowns with JavaScript

When using JavaScript to auto-update dropdowns for year selection, the current year is determined by the clock on the site visitor's computer. If the computer's clock is incorrect, the dropdown may be incorrect.

As an example, with an incorrect timezone setting on the visitor's computer, the midnight of the new year won't correspond to midnight at the visitor's geographic location. The dropdown list would adjust for the new year before or after the actual beginning of the new year.

The following JavaScript writes list items with consecutive years. It starts with the current year and writes as the specified number of list items.

<script type="text/javascript"><!--
var HowManyListItems = 5; // Specify number of "year" selections.
var year = new Date().getFullYear();
for(var i = 0; i < HowManyListItems; i++)
{
   var t = i + year;
   document.write('<option value="' + t + '">' + t + '</option>');
}
//--></script>

The place to specify the number of list items to write is colored blue.

Here is the source code the JavaScript writes.

Put the JavaScript between the select tags of your web page. Example:

<select name="year">
<option value="">-- Select Year --</option>
<script type="text/javascript"><!--
var HowManyListItems = 5; // Specify number of "year" selections.
var year = new Date().getFullYear();
for(var i = 0; i < HowManyListItems; i++)
{
   var t = i + year;
   document.write('<option value="' + t + '">' + t + '</option>');
}
//--></script>
</select>

The above code writes this dropdown:

-- Select Year --

The dropdown list of years presented by this JavaScript code will always start with the current year. (As stated, the current year is determined by the clock on the site visitor's computer.)

Auto-updating "Year" Dropdowns with PHP

When using PHP to auto-update dropdowns for year selection, the current year is determined by the clock on the server where the website is located. If the site visitor's time zone is different than the time zone of the clock on the server, the dropdown list would adjust for the new year before or after the site visitor's actual beginning of the new year.

The following PHP writes list items with consecutive years. It starts with the current year and writes as the specified number of list items.

<?php
$HowManyListItems = 5; // Specify number of "year" selections.
$year = date('Y');
for( $i=0; $i<$HowManyListItems; $i++ )
{
   $t = $i + $year;
   echo("<option value=\"$t\">$t</option>");
}
?>

The place to specify the number of list items to write is colored blue.

Here is the source code the PHP writes.

<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>

Put the PHP between the select tags of your web page. Example:

<select name="year">
<option value="">-- Select Year --</option>
<?php
$HowManyListItems = 5; // Specify number of "year" selections.
$year = date('Y');
for( $i=0; $i<$HowManyListItems; $i++ )
{
   $t = $i + $year;
   echo("<option value=\"$t\">$t</option>");
}
?>
</select>

The above code writes this dropdown:

-- Select Year -- 20242025202620272028

The dropdown list of years presented by this PHP code will always start with the current year. (As stated, the current year is determined by the server's clock.)

If your web page doesn't run PHP, use the JavaScript method.

Otherwise, selecting which method to use involves:

• Considering your preference.

• Considering which clock the dropdown uses (clock on site visitor's computer or clock on website's server) to generate the "year" list items.

Dropdowns for "year" selection can automatically remain current as the year changes.

This could be the last year you need to update your dropdown code for selecting a year in your forms.

Will Bontrager