Automatic form fill using javascript

javascript

Solution

You are not using `<select>` and `<option>` correctly. `<select>` represents a dropdown, which can contain multiple `<option>` elements.

An `<option>` element represents an option in the dropdown. You close an `<option>` with `</option>`. Whatever is BETWEEN the tags will appear in the dropdown:

<option>Hello</option>   <!--user sees "Hello" as an option in the dropdown-->

On the other hand, an `<option>`'s `value` attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the `<option>`: the user won't see it, but it's the one that matters. Whatever is between `<option>` and `</option>` is visible by the user, but doesn't actually DO anything.

Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a `selected` attribute set to `selected` (`selected="selected"`). When a user chooses an option, this attribute gets set automatically (and the `selected` attribute on the other options gets cleared).

So first of all, let's get your `selectedYear` dropdown looking right. You'll need to manually provide some years as options:

<select id="selectedYear" name="year">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
</select>

Note that you need to specify the year both between the tags AND in each `<option>`'s `value` attribute, as explained above. Also note that I moved the `id` to the `<select>`. There's rarely a reason to select an individual `<option>` of a `<select>`; typically to modify a dropdown's options, you should select the `<select>` tag itself.

So, let's try that. I'll re-create the dropdown above, but I'll add its options using JavaScript:

<select id="selectedYear" name="year"></select>

<script type="text/javascript">
    var dropdown = document.getElementById('selectedYear');
    var start_year = 2011;
    var end_year = 2013;

    for (var i =  start_year; i <= end_year; i++) {
        dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
    }
</script>

The `innerHTML` function lets you set the HTML content between an element's opening tag (in this case `<select id="selectedYear" name="year">` and closing tag (`</select>`).

Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the `selected` attribute of the `<option>` to "selected". Here's a portion of your `setActualDate` function, showing how to set the default year for just the `selectedYear` dropdown:

<script type="text/javascript>
function setActualDate() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var dropdown = document.getElementById('selectedYear');

    //loop through the dropdown's options
    for (var i = 0; i < dropdown.options.length; i++) {
        var option = dropdown.options[i];

        //check if this is the option we want to set
        if (option.value == year) {
            option.selected = true;
        } else {
            //ensure all other options are NOT selected
            option.selected = false;
        }

        //NOTE: you can simplify the above if-else to just:
        //option.selected = (option.value == year);
    }
}
</script>

That should be enough to get you started. I hope it all makes sense.

Problem

Original source