入力欄の分岐処理（v4.2.2～）

入力欄・入力フィールドをチェックされた内容に応じて様々に分岐処理をしたい！というあなたの期待に応えるための機能です。

メールフォームプロCGIダウンロードページへ

最も一般的な例でいえばselectやradio、checkboxなどでその他を選んだ場合にその他を入力するフィールドが表示または有効になるという用途ですね。

本機能を利用する場合、config.cgiの

#push @AddOns,'toggle.js';

の行頭のシャープを外し、HTMLに以下のような指定を行います。

＜input type=”radio” name=”職業” value=”その他” data-toggle=”other_job”＞
＜div id=”other_job”＞
＜input type=”text” name=”職業（その他）”＞
＜/div＞

このようにdata-toggle属性を指定し、そこにチェックされた場合に有効にする入力欄が格納されたオブジェクトのIDを指定します。radioやcheckboxの場合は該当エレメントがチェックされた際に、入力欄が有効になります。

その他、data-toggle-hideを指定することで、チェックされていない場合は自動的に隠れます。
selectタグで利用する場合はdata-toggle-valueに該当選択肢のvalueを入れることで、valueが合致した場合に有効になります。詳細はサンプルファイルをご参照ください。

コメント欄

2022-12-02 13:47:41タクマさん
すみません。
data-toggle="hidden" data-toggle-hide="hidden"
で設定した場合同じ条件で2箇所非表示にしたいのですが、何か方法はありますか？

<div id="hidden">非表示対象1</div>

<div>ここも同じ条件で非表示にしたい</div>

教えてください。
2022-12-02 21:39:21和田さん
現状の仕様では複数箇所には対応しておりません。複数箇所に対応させる場合は、同梱されているswitching.jsというファイルを参考に、ある程度javascriptでカスタマイズしていただく必要があります。
2022-12-20 12:02:07ぽのすけさん
複数条件の設定は、

function swElementsExample(){
  if(mfp.$(’condition_1’).checked)
    mfp.sw(false,’object’);
  else if(mfp.$(’condition_2’).checked)
    mfp.sw(false,’object’);
  else
    mfp.sw(true,’object’);
}

みたいな感じで書けばいいですよ。
if or だとうまくいきません。