jqueryでformのresetが効かない時のチェック項目4つ

jqueryでフォームのリセットを行う

formのinputに入力した文字は、html上でresetボタンを設置するほかにも、jqueryでも好きなタイミングでリセットすることが出来ます。

今回はjqueryでinputに打ち込んだ内容をリセットできない場合に確認する項目を4つ紹介します。

1. [0]をつけていない
2. valueにあらかじめ入力した内容をリセットしようとしている
3. hiddenに入力した内容をリセットしようとしている
4. htmlのリセットボタンのnameを”reset”にしている

1. jqueryでフォームのリセットを行う
2. ①[0]をつけていない
3. ②valueにあらかじめ入力した内容をリセットしようとしている
4. ③hiddenに入力した内容をリセットしようとしている
5. ④htmlのリセットボタンのnameを”reset”にしている
6. jqueryのreset()が動かないときはこの4つをまず確認！

①[0]をつけていない

jqueryでformの値をリセットするには以下のように記述します。丸印にはinputやボタンではなくform自体を指定します。

$("○○○").reset();

$("○○○")[0].reset();

この時に上記のように[0]を書かないとリセットされません。普通jqueryでは『$(“”)』でDOMの選択をした後、処理内容をそのまま書くので、少し特殊ですね。jqueryのバグなように感じますが、reset()に関しては[0]がないと動きません。

これがもっとも多い原因じゃないかなと個人的には思います。

②valueにあらかじめ入力した内容をリセットしようとしている

これはjqueryのreset()だけでなくhtmlのresetボタンでも同様です。

htmlやphpでvalueの値をあらかじめ設定して初期値を持たすことがあると思います。

<input type="text" name="" value="初期値" />

この場合、html上のresetボタンでもjqueryのreset()でもリセット後はvalueの値になります。ただ、javascriptやjqueryで初期値のvalueを設定する場合はきちんと何もない状態にリセットされます。

ということでhtmlやphpでvalueの値を設定しているにも関わらずリセットして何も入力されていない状態にしたい場合は、javascript（jquery）で専用のリセット処理を自分で書く必要があります。

もう一度ですがコレが起きるのはhtmlやphpで初期値としてvalueに値を入れた場合です。jqueryやjavascriptで設定したvalueの値はきちんとリセットされます。

③hiddenに入力した内容をリセットしようとしている

これも②と同じでjqueryのreset()だけでなくhtmlのresetボタンでも同様です。

inputのtypeにはhiddenという表示されない入力欄を作ることが出来ます。これは例えばパスワードをformを通して次のページに送ったりするときに使用します。

で、このhiddenに入力された値はresetしても関係なしに保持され続けます。htmlでもphpでもjavascriptでもです。

<input type="hidden" name="" value="パスワードとか" />

なのでここでもhiddenに入力した値をリセットしたい場合はjavascriptで自分で実装しないといけません。

こちらは先ほどの②と違いhtml、php、javascript、jqueryすべてで起こる点に注意してください。

④htmlのリセットボタンのnameを”reset”にしている

最後はかなりレアケースだと思います。

formの部品の中にname=”reset”の部品があるとjqueryのreset()が効かなくなります。

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

推測ですがjqueryで使用しているreset()という関数の名前を上書きしてしまうのだと思います。

名前をreset以外に変えるだけで治るので対策はラクチンです。

jqueryのreset()が動かないときはこの4つをまず確認！

jqueryのreset()が動かない場合の確認項目を4つ紹介しました。よく起こる原因を集めましたのでまずはこの4つから確認してみてほしいと思います。