无法从Javascript生成的表单中获取数据

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. 我试图从javascript创建的html select中获取年份，但是应该读取数据的javascript函数找不到它。

Here is the code for index.html 这是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 这是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. Year列表在页面正文的onload事件中运行。 What am I doing wrong? 我究竟做错了什么？

Answer 1

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. 您应该尝试实现Benjamin Gruenbaum所建议的内容，并将此代码移至处理程序中，以使您可以更好地维护（和读取）您正在编写的Javascript，该Javascript将允许您引用表单，而不是每次都从Document访问它需要数据。

EDIT 编辑

I tossed your code into a JSFiddle and played with it. 我将您的代码扔进了JSFiddle并进行了处理。 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") . 我看到的是您的选择不属于document.forms["cal_form"]返回的表单对象的一部分，这告诉我，您需要通过Javascript生成整个表单，或者需要更改您访问元素的方式，可能是通过id而不是名称（使用document.getElementByID("id") 。

I also recommend not using "innerHTML" to add a string of built HTML. 我还建议不要使用“ innerHTML”来添加内置的HTML字符串。 I recommend building the elements through the DOM, an example being your yearList function to something like the following: 我建议通过DOM构建元素，其中一个例子就是您的yearList函数，如下所示：

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;

Answer 2

the problem is with HTML. 问题出在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. 当您使用错误的HTML表单时，无法获得正确的布局，因此无法向其中添加新元素。

Wrong: 错误：

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

        </form>
    </table>

change this to 更改为

<form name="cal_form">
  <table>

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


  </table>
</form>

无法从Javascript生成的表单中获取数据

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-07-05 16:59:25

解决方案2
0 2012-07-05 17:07:46

无法从Javascript生成的表单中获取数据

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-07-05 16:59:25

解决方案2 0 2012-07-05 17:07:46

解决方案1
4 已采纳 2012-07-05 16:59:25

解决方案2
0 2012-07-05 17:07:46