Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

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

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

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();

で、きちんと動く

おまけ。「html リセットボタン 消えない」

「html リセットボタン 消えない」で検索してこの記事にたどりつく人がいるようなので、老婆心。

form要素の開始タグと終了タグの間にリセットボタン(input type="reset")を入れないと、リセットボタン効かないよ。

それとも、もう知っていた?