jquery でイベント登録フォームを作った
パパゴトというサイトを作っていて、そのトップページには「赤羽から行けるイベントのリスト」というのをつけている。これはPHPとデータベースで実現している。
ここにイベントを誰でも登録できるようにしようと思ってあれこれいじっていた。
jQuery.noConflict()
この記事のおかげでWordpressのcustom_head内にjQueryを書いて動かすことができるようになった。おおーし。
フォームの内容をserialize()して、post()メソッドでPHPへ送信。 成功したらフォームの上に「登録できました」メッセージを載せてわかるようにした。
jQuery によるformのリセット
submit ボタンを使わない状況では送信後にフォームの中身が消えてくれないので、フォームの中身を消す方法を探す。
「formの初期値に戻すのではなく削除したい」というニーズに沿った難しげなjQueryやそれを丸ごとパクっている恥知らずな記事を横目に、いや、ここまでややこしくしなくてもあるだろう……と思って探す。求める正解「formのリセットボタン(input type = reset )と同じ挙動をjQueryで起動する方法」を見つけるまでに苦労した。
正解は、jQueryじゃなくてraw JavaScriptでした。
これが正解。
$('#form')[0].reset();
で、きちんと動く
おまけ。「html リセットボタン 消えない」
「html リセットボタン 消えない」で検索してこの記事にたどりつく人がいるようなので、老婆心。
form要素の開始タグと終了タグの間にリセットボタン(input type="reset")を入れないと、リセットボタン効かないよ。
それとも、もう知っていた?