Home/ Questions/Q 8190169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:31:55+00:00

I am trying to get the year from a javascript created html select however

  • 0

I am trying to get the year from a javascript created html select however the javascript function that is supposed to read the data can’t find it.

Here is the code for index.html

<html>
<head>
    <SCRIPT language="JavaScript" SRC="./js/calendar.js"></SCRIPT>
</head>

<body onload="yearList()">
    <div id="form">
        <table>
            <form name="cal_form">
                <tr>
                    <td>Month:</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>
                    </td>
                </tr>
                <tr>
                    <td>Year:</td>
                    <td id="yearoptiondiv">

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" onclick="drawCalendar(gen_cal_settings())">Draw Calendar</button> 
                    </td>
                </tr>


            </form>
        </table>
    </div>
    <div id="calendar"></div>
</body>

And here is the code for calendar.js

function drawCalendar(cal_settings){
var calendarTable;

calendarTable += '<table>';
calendarTable += '<tr>';
calendarTable += '<td colspan="2">';
calendarTable += cal_settings["month"] + " " + cal_settings["year"];
calendarTable += '</td>';
calendarTable += '</tr>';
calendarTable += '</table>';
document.getElementById("calendar").innerHTML=calendarTable;
}

function yearList(){
var x="",i;
x += "<select name='year'>";
for (i=2011;i<=3012;i++)
{
    x += "<option value='" + i + "'>" + i + "</option>";
}
x += "</select>";
document.getElementById("yearoptiondiv").innerHTML=x;
}

function gen_cal_settings(){
var cal_settings = new Array(); 
cal_settings["month"]=document.forms['cal_form']['month'].value;     
cal_settings["year"]=document.forms['cal_form']['year'].value;   
return cal_settings;    
}

The Year list is ran in the onload event for the body of the page.
What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are accessing the value of the select, when the select contains an array of options. What you need is the value of the selected option, not the value of the select.

    You’d want something like: 

    document.forms["cal_form"]["year"].options[document.forms["cal_form"]["year"].selectedIndex].value

    But man that is ugly. You should try to implement what Benjamin Gruenbaum has suggested and move this code into a handler that allows you to better maintain (and read) the Javascript you’re writing which will allow you to reference the form instead of accessing it from Document every time you need data from it.

    EDIT

    I tossed your code into a JSFiddle and played with it. What I can see is that your select is not part of the form object that is being returned from document.forms["cal_form"], what this tells me is that you need to generate the entire form via Javascript or you need to change the way you access the element, perhaps by id instead of by name (using document.getElementByID("id").

    I also recommend not using “innerHTML” to add a string of built HTML. I recommend building the elements through the DOM, an example being your yearList function to something like the following:

    function yearList(){
  var select, option, year;
  select = document.createElement("select");
  select.setAttribute("name", "year");
  select.setAttribute("id", "year"); // For use accessing by ID and not name
  for (i = 2011; i <= 3012; ++i)
  {
    option = document.createElement("option");
    option.setAttribute("value", year);
    option.innerHTML = year;
    select.appendChild(option);
  }
  document.getElementById("yearoptiondiv").appendChild(select);
}

    And then when you need to access the value:

    document.getElementById("year").value;
    • 0