Unable to Get Data from Javascript Generated Form

Question

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?

Please, it's hurting my eyes :( Please try to not use so much code inlined in your html, it's really unmaintainable. Consider non intrusive javascript and adding the event listener using addEventListener instead — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jul 5, 2012 at 16:52
Why through unobtrusive javascript: en.wikipedia.org/wiki/Unobtrusive_JavaScript . For example in order to add an event listener to a function (for example onClick) you can use the addEventListener method built into most modern browsers, or even better, use jQuery which takes care of this for you — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jul 5, 2012 at 16:55
i dont see any thing wrong in the function it must be about the position where you are having your div. please look at codebins.com/bin/4ldqpbh/1 — gaurang171
– gaurang171, Commented Jul 5, 2012 at 17:06

Brandon Buck · Accepted Answer · 2012-07-05 18:47:14Z

4

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;

edited Jul 5, 2012 at 18:47

answered Jul 5, 2012 at 16:59

Brandon Buck

7,1902 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Talon06 Over a year ago

Thanks, I will look into his suggestion

Talon06 Over a year ago

The problem I am still having is that since the select is generated with Javascript on loading the page the button does not see it. I think I am going to have to change how the page function to get what I want. Or stop being lazy and relearn jquery again. Thanks again

gaurang171 Over a year ago

.value always work on the select. no need to use selectedIndex

Brandon Buck Over a year ago

@codebins.com You are correct, I was not aware that that worked (I mostly use jQuery for DOM access). I don't see how that earned me a down vote though as my answer is still perfectly valid and works.

Talon06 Over a year ago

Building the form in javascript worked perfectly. I will have to do some research to set it up using jquery or DOM. Thanks for the Help

|

gaurang171 · Accepted Answer · 2012-07-05 19:29:22Z

0

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>

edited Jul 5, 2012 at 19:29

answered Jul 5, 2012 at 17:07

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

2 Comments

Talon06 Over a year ago

I added more code to my question. It should show how I am calling the scripts and hopefully show what I am doing wrong.

Brandon Buck Over a year ago

Hmm, I didn't even catch that. Good eye.

Collectives™ on Stack Overflow

Unable to Get Data from Javascript Generated Form

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related