CODEWITHSUNDEEP
javascripthtml
Talon06
Talon06

Reputation: 1796

Unable to Get Data from Javascript Generated Form

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?

Upvotes: 0

Views: 378

Answers (2)

gaurang171
gaurang171

Reputation: 9090

the problem is with HTML.

You cant have and then

make following changes and it will work. the reason is. when you have wrong HTML form dont get proper layout and so you cant add new elements to it.

Wrong:

<table>
        <form name="cal_form">
            ..............
            ..............
            ..............

        </form>
    </table>

change this to 

<form name="cal_form">
  <table>

            ..............
            ..............
            ..............


  </table>
</form>

Upvotes: 0

Brandon Buck
Brandon Buck

Reputation: 7181

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;

Upvotes: 4

Related Questions