仕事で管理しているシステムで、テキストフォームの値が更新された時にjQeuryを使って自動計算をするようなページがある。そこには入力値を元に戻す機能もあるのだが、単純にリセットボタンだけでは再計算はされないので、値をリセットして再計算するようにjQueryで実装した。

その時は、jQueryを使ったフォームのリセット方法を調べて、以下のように実装した。

<script type="text/javascript">
;(function ($) {
    $('input:reset').click(function (event) {
        event.preventDefault();

        $('form').get(0).reset();

        // 以下、再計算処理
    });
})(jQuery);
</script>

この時のリセットボタンはこのようにした。

<input type="reset" name="reset" value="リセット">

jQueryは、すでに使っていた1.10.1を使用。

実装してこのページをChromeで確認したところ、consoleに

Uncaught TypeError: object is not a function

というエラーが表示された。

方法を調べている過程でJavaScriptを使用したformのリセットは特殊であることは理解したので、プログラム側に問題があるだろうと考えて

$('form')[0].reset();

や

$(this).closest('form').get(0).reset();

などに変えて試したが、解決せず。他に方法がないかと調べるも、解決するような情報は得られず。

どうしようかと悩んでいた時、ふと同じシステムの別の画面で似たような機能があることを思い出した。そのソースと比較したところ、スクリプトには気になるような違いはなかったが、リセットボタンのタグに微妙な違いを見つける。

関係ないだろうなと思いながらも他にあてがないので、試しにリセットボタンのname属性を削除して

<input type="reset" value="リセット">

としたところ、エラーは出なくなりリセットできるようになった。正直、どうしてこれが問題だったのかは理解できていないのだが、同様の機能を今後も実装することになりそうなので、備忘録として残しておく。

作業ノート

様々なまとめ、雑感など

jQueryを使ったformのリセット処理ではまった

参考