Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

formのリセットボタン(input type = reset )と同じ挙動をjQueryで起動する方法

jquery でイベント登録フォームを作った

パパゴトというサイトを作っていて、そのトップページには「赤羽から行けるイベントのリスト」というのをつけている。これはPHPとデータベースで実現している。

ここにイベントを誰でも登録できるようにしようと思ってあれこれいじっていた。

jQuery.noConflict()

digwp.com

この記事のおかげでWordpressのcustom_head内にjQueryを書いて動かすことができるようになった。おおーし。

js.studio-kingdom.com

フォームの内容をserialize()して、post()メソッドでPHPへ送信。 成功したらフォームの上に「登録できました」メッセージを載せてわかるようにした。

jQuery によるformのリセット

submit ボタンを使わない状況では送信後にフォームの中身が消えてくれないので、フォームの中身を消す方法を探す。

「formの初期値に戻すのではなく削除したい」というニーズに沿った難しげなjQueryやそれを丸ごとパクっている恥知らずな記事を横目に、いや、ここまでややこしくしなくてもあるだろう……と思って探す。求める正解「formのリセットボタン(input type = reset )と同じ挙動をjQueryで起動する方法」を見つけるまでに苦労した。

alphasis.info

正解は、jQueryじゃなくてraw JavaScriptでした。

blog.dododori.com

これが正解。

$(‘#form’)[0].reset();

で、きちんと動く