無法從Javascript生成的表單中獲取數據
[英]Unable to Get Data from Javascript Generated Form
問題描述
我試圖從javascript創建的html select中獲取年份，但是應該讀取數據的javascript函數找不到它。
這是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>
這是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;
}
Year列表在頁面正文的onload事件中運行。 我究竟做錯了什么？
2 個解決方案
解決方案1
4 已采納 2012-07-05 16:59:25
當選擇包含選項數組時，您正在訪問選擇的值。 您需要的是選定選項的值，而不是選定值。
您想要以下內容：
document.forms["cal_form"]["year"].options[document.forms["cal_form"]["year"].selectedIndex].value
但是那個丑陋的人。 您應該嘗試實現Benjamin Gruenbaum所建議的內容，並將此代碼移至處理程序中，以使您可以更好地維護（和讀取）您正在編寫的Javascript，該Javascript將允許您引用表單，而不是每次都從Document訪問它需要數據。
編輯
我將您的代碼扔進了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;
解決方案2
0 2012-07-05 17:07:46
問題出在HTML。
你不能擁有然后
進行以下更改，它將起作用。 原因是。 當您使用錯誤的HTML表單時，無法獲得正確的布局，因此無法向其中添加新元素。
錯誤：
<table>
<form name="cal_form">
..............
..............
..............
</form>
</table>
更改為
<form name="cal_form">
<table>
..............
..............
..............
</table>
</form>
無法從javascript生成的數據獲取php中的發布數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.