[メールフォームプロ] 選択肢によって項目の表示・非表示を切り替えたい
選ばれた項目に応じて別の項目を表示する
- チェックボックスやラジオボタンなどの選択式のフォーム項目で、ある選択肢が選ばれたときに別の項目を入力させたいというケースがあります
- よく見かけるのが「その他」というチェックボックスが選ばれたときにテキストボックスを出して具体的な内容を入力してもらう、というもの
- このようなフォームの項目を出し入れする制御も、メールフォームプロなら簡単に実現できます
config.cgi
push @AddOns,'toggle.js'; ## 入力欄の可変
- 下準備として、config.cgiの「入力欄の可変」オプションを有効にします（行頭の#を削除）
サンプルコード
<dt><span class="must">必須</span>好きなザビ家は？</dt>
<dd>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" data-min="1" value="デギン">
<span>デギン</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ギレン">
<span>ギレン</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="キシリア">
<span>キシリア</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ドズル">
<span>ドズル</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ガルマ">
<span>ガルマ</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="ミネバ">
<span>ミネバ</span>
</label>
<label>
<input type="checkbox" name="好きなザビ家は？" required="required" value="その他" data-toggle="sonota" data-toggle-hide="1">
<span>その他</span>
</label>
<div id="sonota">
<input type="text" name="好きなザビ家は？（その他）" size="80" placeholder="ダイクン派です">
</div>
<div id="errormsg_好きなザビ家は？" class="mfp_err"></div>
</dd>
- テキストボックスを表示するトリガーとなる「その他」ボックスに「data-toggle="sonota" data-toggle-hide="1"」と記載しています
- これにより、「その他にチェックがあるときにだけ"sonota"のidがついたdiv要素を表示する」という動きが実現できます
余談
- 表示切り替えする項目が「required="required"」で必須項目になっている場合でも、表示されているときだけ必須項目として扱われ、表示されていないときは未入力でもエラーが出ないようになっています。うーん、素晴らしい
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。