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

Unable to Get Data from Javascript Generated Form

本文关键字：表单 获取 数据 Javascript      更新时间：2023-09-26

我正在尝试从javascript创建的html中选择年份，但是应该读取数据的javascript函数找不到它。

这是索引的代码.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>

这是日历的代码.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;    
}

年份列表在页面正文的 onload 事件中运行。我做错了什么？

当选择包含选项数组时，您正在访问选择的值。您需要的是所选选项的值，而不是所选选项的值。

你想要这样的东西： 

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

但是男人是丑陋的。你应该尝试实现Benjamin Gruenbaum的建议，并将这段代码移动到一个处理程序中，该处理程序允许你更好地维护（和阅读）你正在编写的Javascript，这将允许你引用表单，而不是每次需要数据时都从文档中访问它。

编辑

我把你的代码扔进了JSFiddle并玩了它。我可以看到的是，您的选择不是从document.forms["cal_form"]返回的表单对象的一部分，这告诉我您需要通过 Javascript 生成整个表单，或者您需要更改访问元素的方式，也许通过id而不是按名称（使用 document.getElementByID("id")。

我还建议不要使用"innerHTML"来添加构建的HTML字符串。我建议通过 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);
}

然后，当您需要访问该值时：

document.getElementById("year").value;

问题出在HTML上。

你不能有然后

进行以下更改，它将起作用。 原因是。 当你有错误的HTML表单时，没有得到正确的布局，所以你不能添加新的元素。

错：

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

将其更改为 

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

  </table>
</form>
相关文章：