無法從Javascript生成的表格獲取數據

我想從javascript創建的html選擇獲得年份，但是應該讀取數據的javascript函數找不到它。無法從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>

這裏是今年的榜單在onload事件跑了爲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;  
}

代碼頁面的正文。我在做什麼錯？

來源

2012-07-05 Talon06

請，它傷害了我的眼睛:(請儘量不要使用你的HTML內聯這麼多的代碼，這真是不可維護的考慮非侵入性的。 JavaScript和添加事件監聽器使用addEventListener而不是 – 2012-07-05 16:52:26

我會怎麼做呢？ – Talon06 2012-07-05 16:53:57

爲什麼通過不顯眼的javascript：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript。例如，爲了向一個函數添加一個事件監聽器（例如onClick），你可以使用內置於大多數現代瀏覽器的addEventListener方法，或者更好的方法是使用jQuery來處理這個問題 – 2012-07-05 16:55:15

當select包含選項數組時，您正在訪問select的值。你需要的是選定的選項的值，而不是select的值。

你想要的東西，如：

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

但人是醜陋的。你應該嘗試實現Benjamin Gruenbaum建議的內容，並將這些代碼移動到一個處理程序中，該處理程序允許您更好地維護（並閱讀）您正在編寫的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;

來源

2012-07-05 16:59:25

謝謝，我會看看他的建議 – Talon06 2012-07-05 17:01:31

我仍然存在的問題是，因爲在加載頁面時使用Javascript生成的選擇按鈕沒有看到它。我想我將不得不改變如何獲得我想要的頁面功能。或者停止懶惰，重新學習jquery。再次感謝 – Talon06 2012-07-05 17:05:28

.value始終在選擇工作。無需使用selectedIndex – gaurang171 2012-07-05 17:08:43

問題在於HTML。

你不能，然後

作出以下更改，它會工作。原因是。當你有錯誤的HTML表單沒有得到適當的佈局，所以你不能添加新的元素。

錯誤：

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

     </form> 
    </table>

改變這

<form name="cal_form"> 
    <table> 

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


    </table> 
</form>

來源

2012-07-05 17:07:46 gaurang171

我在我的問題中添加了更多代碼。它應該顯示我如何調用腳本並希望顯示我做錯了什麼。 – Talon06 2012-07-05 17:50:14

修改我的答案 – gaurang171 2012-07-05 19:29:46

嗯，我什至沒有捕捉到。好眼睛。 – 2012-07-05 19:35:41

無法從Javascript生成的表格獲取數據

回答

相關問題