当社はIT技術のオンライン教育を得意としたセミナー専門会社です。

ITエンジニアの技術力UPをお約束します。

マルチFormページでの個別Form毎のボタンをjavascriptでイベントスキャンし対応する。

講習でアプリ開発を行わせている傍ら、受講生から1ページに複数のFormエントリーが存在していた場合どうやって個別にjavascriptで制御したらよいか質問された。普段あまりjavascriptをコーディングする機会がないため、即答できず考え方の説明でその場は終わったが 改めて時間を作って実験してみた。 今回はjQueryを使わない方法と使う方両方でやってみました。 テストなのでactionのスクリプトは指定なしとしました。

サンプルHTMLページ

javascriptのコード

e.preventDefault();を入れないと直ぐにエラーメッセージの表示が消えてなくなるため使用します。この機能はaction=””でやると自分自身のページに 戻るためリロードをかけた状態になりエラーメッセージが直ぐに消えてなくなるための対処です。つまりエラーが生じたときはsubmitさせないための処置。

jQueryを使った場合のHTMLコード

jQueryを使った場合のjavascriptコード