prototype.jsのリセットボタンに注意

JavaScript

１日ハマったのでメモ。

以下のようなソースがあったとしよう。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="FC2,inc" />
<meta name="copyright" content="FC2,inc" />
<title>Prototype.js フォームリセットテスト</title>
<script type="text/javascript" src="prototype-1.6.1.js"></script>
<script type="text/javascript"><!--
 function resetButtonClick(f) {
  Form.reset(f);
  alert('reset!');
 }
//--></script>
</head>
<body>
<form name="testForm" action="">
<input type="text" name="text" value="" />
<input type="submit" name="submit_text" value="Submit" />
<input type="button" name="reset" value="Reset" onClick="resetButtonClick(document.testForm);" />
</form>
</body>
</html>

prototype.jsのForm.reset()を使う時、

<input type="button" name="reset" value="Reset" onClick="resetButtonClick(document.testForm);" />

のように、name値に「reset」を指定すると、動かない（リセットされない）。

FireFoxのエラーコンソールには、

form.reset is not a function.

と表示される。

動くようにするには、

<input type="button" name="reset_button" value="Reset" onClick="resetButtonClick(document.testForm);" />

のように書き換えれば良い。