如何解決表單重置reset is not a function 出錯

實際上很久之前遇到過一回，結果最近開發又遇到這個Bug，而且也折騰了我一些時間，比如說我在利用Ajax提交表單後，需要重置表單各項內容從交互上來避免使用者重複提交，正常的表單HTML結構如下所示：

<form action="" method="post" id="LoginForm">
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" />
  <input type="submit" id="submit" name="submit" value="Login" />
  <input type="reset" id="reset" name="reset" value="Reset" />
</form>

如果單純需要採用JavaScript來重置，可以採用document.getElementById('LoginForm').reset()來實現，使用jQuery則使用$('#LoginForm')[0].reset() 或$('#LoginForm').trigger("reset") ，但是對於上述以HTML設計的表單來說，這些reset表單的方法都失效了！ FireBug偵錯提示...reset is not a function ，這裡問題出在哪裡了呢？有時候你永遠想不到一個小小的壞習慣會帶來相當的麻煩，在糾結許久後搜尋網絡，在stackoverflow找到了答案#。原來問題出在reset按鈕上，我們把reset按鈕實現的HTML聚焦了：

<input type="reset" id="reset" name="reset" value="Reset" />

問題就在於id="reset"與name="reset"，這裡的reset屬性覆寫了原來的reset方法，自然無法呼叫並提示is not a function，解決的辦法也很簡單，避免用reset關鍵字來命名reset按鈕的name和id屬性。例如下面的命名方式則比較保險：

<input type="reset" id="ResetButton" name="ResetButton" value="Reset" />

好了，一個由命名帶來的小問題就這麼解決了，這時我注意到了submit按鈕，其id="submit"並且name="submit"，會不會導致form表單的submit()方法失效呢？由於我採用的是Ajax方式提交所以這個問題也沒有深究，或許把id="submit"和name="submit"也改成不同的名字，比如id="SubmitButton"和name="SubmitButton"會比較好。

以上是如何解決表單重置reset is not a function 出錯的詳細內容。更多資訊請關注PHP中文網其他相關文章！