モノグサにお灸

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

作成日： 2018年9月13日

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

📝 フォーム

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

📝 フォーム

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

conditional logic

と言うのだそうです。

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

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

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

favicon
Show & Hide Form Fields Conditionally - jQuery dependent.fields.js https://www.jqueryscript.net/form/Show-Hide-Form-Fields-Conditionally-jQuery.html

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

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

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

HTML 
<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>
JavaScript 
$('#your-other').dependsOn('#your-select', ['other']);

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

いえ、
ならないのです。

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

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

55行目を下記の通り

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

84行目を下記の通り

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

に書き換えました。

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
【jQuery】フォームの条件分岐（conditional logic）にはdependsOn！
次の記事 ➡
キャッシュが効いてるWordPressサイトでアクセス数を更新する方法

関連投稿

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。