シリーズ『フォームについて考える』~

【jQuery】フォームに条件分岐(conditional logic)を設定する

【jQuery】フォームに条件分岐(conditional logic)を設定する


開発

例えばアンケートフォーム等で




という設問があって、「その他」を選択すると、その下に新たに




というテキストフォームが追加される、というのを作りたくて調べてみたら、このような仕様を

conditional logic

と言うのだそうです。

そこでWordPressのプラグインでそのような機能を実装出来るプラグインを探してみたのですが、それらは軒並み有料でした。

しかし、jQueryのプラグインで無料で実装出来ることがわかりましたので、試してみることに。

使用したプラグインはこちらのdependent.fields.js

Show & Hide Form Fields Conditionally - jQuery dependent.fields.js
参考
Show & Hide Form Fields Conditionally - jQuery dependent.fields.js

Just another jQuery plugin for handling conditional forms that have the ability to show and hide certain form fields based on previous user input.

jQuery Script

他にも多々あったのですが、データ属性を追加する必要があったりで、これだとWordPressのフォームプラグインでは使用出来ない(使用し辛い)ので候補から除きました。

dependent.fields.jsは、先程の例で言うと

<div class="form-group">
    <label>ここに来た目的は?</label>
    <select class="form-control" id="your-select" style="width:100px;">
        <option value="sightseeing">観光</option>
        <option value="work">仕事</option>
        <option value="other">その他</option>
    </select>
</div>
<div class="form-group">
    <label>その他を選んだ方はこちらに目的をご記入下さい</label>
    <input type="text" id="your-other" class="form-control" style="width:200px;">
</div>
$('#your-other').dependsOn('#your-select', ['other']);

としてやると、セレクトフォームで「その他」を選択すると下にテキストフォームが表示されるようになります・・・。

いえ、ならないのです。

というのも、このプラグインは、各フォームをpタグで囲む必要があるのです。

しかし、自分は主にbootstrapに準拠してコードを書くのが主なので、pタグを使うことはありません。
そのため、プラグインの

55行目

elements.closest('p').toggle(showEm);

elements.closest('.form-group').toggle(showEm);

に。

84行目

$(this).closest('p').hide();

$(this).closest('.form-group').hide();

に書き換えました。

これで無事、conditional logicを実装することが出来ました。

今日はここまで
【jQuery】フォームに条件分岐(conditional logic)を設定する

【jQuery】フォームに条件分岐(conditional logic)を設定する


開発

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…


関連する記事



シリーズ『フォームについて考える』


【jQuery】フォームに条件分岐(conditional logic)を設定する
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…


こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す