Vimとボクと、ときどき、PHP

Vim好きなエンジニア(主にPHP開発)が不定期に技術情報やネタを書いていくブログです

Home » 同姓同名の罠

同姓同名の罠

久しぶりに、jQuery(というかJavaScript)でハマったので、簡単に覚え書き。分かれば何てことはないけど、ハマる可能性は高いと思う。そう思いたい。

状況

HTMLで<input type="reset" value="リセット">と書くと、フォームの中身をリセットできる。あくまで「リセット」なので、初期状態に戻すだけであって「クリア」ではない点に注意。しかし、今回はこういう話ではないです。

このリセットボタン、ちょっと不満な点として、チェックボックスやセレクトボックスのonchangeイベントを発火してくれない。
チェックボックスの選択状態により入力項目をdisabledにしたり、セレクトボックスの選択次第で項目を非表示にしたりと、ユーザビリティ向上のための処理を書いていてもそれが動いてくれないので、リセット処理の後で自分でそういう処理を書いてあげなきゃいけないのです。

そこで、ちょろっと工夫してこんな処理を書きます。

$(function () {
    $('input[type=reset]').click(function (e) {
        e.preventDefault();
        // $(this).parents('form').reset(); ←いつからか分からないけど、これだと動かなくなった
        $(this).parents('form')[0].reset();

        // ここでリセット後にやりたい処理を書く。
        // チェックボックスの状態を見て disabled を制御するなど。
    });
});

本来ならこれで問題なく動くはず。しかし、今回はハマってしまった。フォームがリセットされなかった。

どうしてこうなった

ブラウザでコンソールを開いてみると、JavaScriptのエラーが出てました。

… reset is not a function …

みたいなメッセージだったけど、こちらとしては「えー?reset()関数ってあったよね??無くなったの???」と半分混乱状態。

で、色々なところをよーーーーく見てみたら、<input type="reset" name="reset" value="リセット">が目につきましてね。inputタグを書く時には、typeの後にnameを書く癖がついていて、何も考えずに「リセットボタンだし”reset”でいいよな」とこのように書いていたらしいです。
最初は「あー・・・こんなふうに書いた記憶は全く無いけど・・・」くらいにしか思ってなかったけど、ふと「name="reset"・・・?」と考え直しまして。そして数秒後、全てが氷解して自分のアホさ加減に脱力しますた。

直そう

原因はさっきから書いている通り、name="reset"にあります。
フォームにreset()関数は存在しますが、フォーム内に”reset”という名前の要素が存在するので、

$('form')[0].reset

のようにすると「リセットボタン」が取得されます。同名なので関数が上書きされてしまうのです。その状態で「reset 関数」を呼ぼうとしているので、「そんな関数は無いよ」と言われてしまうのです。

解決法は簡単。「リセットボタンの名前を”reset”以外にする」です。
今回はname="form_reset"としておきました。正直、使わないので他とかぶらなければ何でもいいです。

あぁ、こんなアホらしいことで1時間くらい無駄にしてしまった・・・。

Name of author

Name: よーすけ

Short Bio:

主にPHP開発をやってる社内PGです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です