例えば・・・
採用情報のエントリーフォームにおける新卒採用と中途採用だったり、お問い合わせ内容が単なるお問い合わせか見積依頼か苦情かいやがらせか交際依頼か援助希望か、等々・・・・・
お問い合わせフォーム(メールフォーム)は、状況によって取りたい項目が変わると思うんですけど、その種類毎に一つ一つフォームを用意するのも面倒な話ですよね???
(もちろん、ケースバイケースでちゃんと別々にフォームを用意する必要がある場合も多いですが。)
ということで、一つの手段として以下のような動作をメモって置くことにしました。あくまでも、状況によってちょっと入力してもらいたい項目が変化する、程度の動作用。
採用情報のエントリーフォームでサンプル(一部、非実用的な項目アリ)
何してんの?
エントリー区分「新卒」「中途」及び、今回は特別に、性別「男」「女」でも、取得する項目を切り分けよう、というサンプルです。
んでもって、個別項目については、それぞれclass名を振っておきます。
今回の例では、
・学校名と学部・学科・専攻は新卒用、として「shin」というクラスを適用。
・職歴は中途用、として「chu」というクラスを適用。
・好きなアイドルは男用、として「man」というクラスを適用。
・スリーサイズと眼鏡は女用、として「woman」というクラスを適用。
そして、エントリー区分及び性別がそれぞれクリックされた時に、該当クラスを表示したり隠したりしているだけですが、jQuery使えば、かなりシンプルに出来るなぁ、と、こう思った次第です。
呼び出しているjsのソース(jquery.js版)
※上の2行及び、「$()」を「j$()」にしているのは、prototype.jsとのバッティングを避けるだけの目的ですので、jquery.jsしか使わないよってな場合は、上の2行はカットして、「j$()」を「$()」に書き換えてくださいな。
処理的には、jQueryを使って、各ラジオボタンにクリックイベントを割り当てて、該当クラスに対して「show()」「hide()」しているだけです。やってること自体は超簡単です。jQuery様々。
あとは、いかにして汎用化するか、、、だなぁ。
その他
上記の例では、固有項目を最初にcssで display: none; しているが、javascriptをオフにされていた場合は、永遠に固有項目は表示されない、ということになってしまうので、jQueryの「$(function(){ });」とかで固有項目のクラスに hide(); の記述を 入れる、とかの方が良いかも?
と思いきや、出さなくて良い項目までビロビロ出てしまうので、これもまたケースバイケースと言った所でしょうか・・・・・
汎用的に最善なツールが作れれば最高なんだけどなぁ〜〜〜。
JavaScript関連リンク
サイト
Binbo-Special > 技術情報らしきもの > JavaScript
当サイトです。
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい!です。
書籍
Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
読み途中ですが、なかなか面白いです。
jQueryで作る Ajaxアプリケーション
jQueryに興味を持ったら読んでみるのも吉。


