[Javascript] form.reset()がエラーになる原因

ハマってハマってハマリングのユゲタです。 プログラミングとは、ハマって、沼って、もがいて、解決してスッキリする行為の事です。 ソースコード？なにそれ？美味しいの？ まったく技術的な話ではなく、ITの仕事をしていると、何かのトラブルに合う確率ってめちゃくちゃ高いです。 でも、それが解決すると、どうしても取り切れない歯クソがきれいに無くなったあの感覚たまらんですよね。 というわけで、今回の歯クソハマった問題点は、Javascriptのform reset()です。 動かんかったんですよ、セットして３時間ぐらい・・・ そしてエラーが出てたんですよ・・・ エラーの原因も、意味不明の永野芽郁ですよ。 というわけで、ハマったエラーと、解決方法と、色々な気付きについて、ブログに残しておきます。

form.reset()について

formリセット機能は、ホームページの入力フォームで書いた内容をリセットする機能です。 書き方は簡単で以下のように数パターンで書けます。 1. <input type="reset" value="Reset"/> 2. <button type="reset">Reset</button> 3. document.forms[1].reset() １，２番は、HTMLに直接かけて、３番はJavascriptで書く書き方ですね。 入力した内容を全て無かったことにする機能ということで、入力値をすべて空白に戻すと思いガチですが、ページを表示した状態に戻すというのが本来の機能です。 例えば、お問い合わせの入力フォームで、「修正する」という機能があるページの場合、修正をしていたけど、やっぱり修正前の状態に戻したいという場合にこのリセット機能が役立ちます。 具体的に何の値にリセットするのかと言うと、 inputタグは、属性のvalue値（radioやcheckboxの場合は、checked属性）、 selectタグは、optionタグのselected、 textareaは、textContent値、 です。 Javascriptで、それぞれの値を書き換えることもできて便利な半面、情報漏洩に注意しないといけませんね。 属性で書かれた値は、HTMLソースとして、ブラウザのデバッグコンソール機能などで簡単に見れてしまいますからね。

エラーについて

今回、仕事でとあるシステムにformリセット機能を設置した所、次の様なエラーが出て、正常にリセット機能が動作しませんでした。 isn't function reset() なんじゃこりゃあ！ 調べて（ググって）みると、ページ内に、id="reset"という属性セットがされていないか？という解消方法がたくさんヒットしましたが、そんな要素は一つもありませんでした。

解決は突然に

リセットボタンが次のように書かれていたのが原因だったようです。 <button type="button" class="btn_reset" name="reset">リセット</button> このコードには２つのミスがあります。 １つは、buttonタグのtype属性が"button"になってしまっている点です。 正確には、"reset"ですね。 これだけで解決できたんですが、もう一つ、name="reset"が問題した。 古くからのHTMLの悪い仕様として、name値をid値として利用できてしまうというのがあります。 次のリファレンスページにも注意事項として書かれています。 https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/id_attr.php name値とid値は、同じと思ったほうがいいのかというと総でもなくて、cssなどではちゃんと判別されてしまうので、javascriptでのお作法と考えたほうがいいでしょう。

あとがき

たまにこんな感じのアフォな内容で作業が止まってしまう時に、一生懸命考えている自分が愛おしくなります。 そして、解決したら、自分を思いっきり甘やかしてあげましょう。 え？そんな事やってるから、いつも凡ミスやっちまうんだよ・・・だって？ そのとおりかもしれません。 でも、こんなミスも、人に話せばまあまあ面白いネタになるってもんですよ。 実際こうやってブログを１記事書いちゃってるんですから。