那些年我們踩過的坑之表單reset

開發者往往是在一個又一個的坑中成長起來的，自學的開發者尤其如此，剛剛填完一個坑，轉身又掉進另一個坑。有些坑很容易就跳出來了，也有些坑能整了一天都沒頭緒，第二天早上一來發現后面就有一架通往坑外的梯子，坑爹啊，問題原來這么簡單！

我今天就踩了一個比較坑的坑，好在花了幾分鍾就跳出來了。事情是這樣的：

今天在做一個新增自定義假期的功能，用到了表單。頁面上有個新增按鈕，點擊彈出一個層，里面就是表單，用的是ajax提交。當用戶點擊取消時（順便吐槽一下，保存和取消按鈕設計得實在是太丑了），清空表單數據，彈出層消失；當用戶點擊保存時，確認保存成功后，彈出層消失，清空表單數據。於是我把取消按鈕做為reset按鈕，大概代碼是這樣的：

<form method="post" name="addHoliday" id="addHolidayForm" >
　　// ……
    <input type="submit" name="saveHoliday" value="保存" />
    <input type="reset" name="reset" value="取消" />
</form>

當用戶點擊新增按鈕時，將上一次新增時填的數據清空，表單重置

$("#addHolidayForm")[0].reset();

這個時候瀏覽器報錯了:

not a function ???

怎么會？難道是dom沒選中？於是我alert出$("#addHolidayForm").attr("name")，得到“addHoliday”，dom選中了，可是問題出在哪？為了找出原因，我又用原生js試了一次

document.addHoliday.reset();

一樣報錯：TypeError: document.addHoliday.reset is not a function

於是我開始懷疑人生了。。。

於是我開始刪除表單代碼看到底是哪一行出了問題，很傻的辦法。首先我刪了保存和取消按鈕，點擊新增，表單重置成功了。。。

仔細一看，發現取消按鈕的name值為reset，而表單重置方法也是reset，表單可以通過form.name來獲取對應的表單元素，於是問題來了：學挖掘機……額，於是問題出來了，很明顯，從上面的結果可以看出來，document.addHoliday.reset得到的是name值為reset的input元素而非reset方法，自然就not a function。

by：王美建 from：http://www.cnblogs.com/wangmeijian/