サポート » プラグイン » MWWPFormセレクトボックス選択でテキストボックスを表示

  • 解決済 kazunoko

    (@kazunoko)


    MW WP Formプラグインについて質問があります。

    セレクトボックスの値がいくつかあり、その中の値で「その他」を選んだ時に、非表示となっていたテキストボックスを表示させたいですが、どのようにやるのかがわかりません。
    現在以下のコードで作成しています。

    <table class="s_form">
    <tbody>
    <tr>
    <th>選択肢1<span class="label label-danger">必須</span></th>
    <td>
    [mwform_select name="選択肢1" class="form-control" children=":▼選択してください" post_raw="true"]
    
    //↓ここから非表示:その他を選択したら表示する
    <div class="hidden_etc">
    <span>※「その他」を選択した場合は詳細を入力してください</span><br>
    [mwform_text name="選択肢1のその他" class="form-control"]</div>
    //↑ここまで非表示
    
    </td>
    </tr>
    </tbody>
    </table>

    ■選択肢1の値は特定カテゴリーの記事タイトルを表示するよう「mwform_choices_mw-wp-form-27」を使用ています。
    ■選択肢1の値で「その他」を選択したら「選択肢1その他」のテキストボックスを必須にしています。
    ■hidden_etcはCSSで.hidden_etc{display:none;}と非表示にしています。

    //選択肢1の値を表示
    function add_select_item_sentaku( $children, $atts ) {
    if ( $atts['name'] == '選択肢1' ) {
    $arg = array(
    'posts_per_page' => -1,
    'orderby' => 'slug',
    'order' => 'ASC',
    'post_type' => 'sentaku1'
    );
    $cat_posts = get_posts( $arg );
    foreach( $cat_posts as $cat_post ){
    $children[$cat_post->post_title] = $cat_post->post_title;
    }
    }
    return $children;
    }
    add_filter( 'mwform_choices_mw-wp-form-27', 'add_select_item_sentaku', 10, 2 );
    
    //その他を選択したら「選択肢1のその他」を必須にする
    function my_validation_rule1( $Validation, $data ) {
    if ( $data['選択肢1'] == 'その他' ) {
    $Validation->set_rule( '選択肢1のその他', 'noEmpty', array(
    'message' => 'その他を選択したの場合は必ず入力してください。'
    ) );
    }
    return $Validation;
    }
    add_filter( 'mwform_validation_mw-wp-form-27', 'my_validation_rule1', 10, 2 );

    ラジオボタンならテキストボックス表示・非表示のやり方があるようなのですが、今回は値が20件もあるのでセレクトボックスでできるようにしたいです。
    参考URL:【MW WP Form】ラジオボタンの選択項目によって分岐させたい!

    もし可能でしたら教えてください。

    • このトピックはkazunokoが4ヶ月前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • shokun0803

    (@shokun0803)

    kazunokoさん、こんにちは。

    参考 URL と記載の情報を元に以下のような構成を考えてみました。ただしこれはプラグインのフォームを記載する箇所に css や script 等をまとめて記載してしまっている簡易的な内容で、このままの構成は適切ではないので、適度に読み替えてご自身のサイトで検証されてください。

    <table class="s_form">
    <tbody>
    <tr>
    <th>選択肢1<span class="label label-danger">必須</span></th>
    <td>
    [mwform_select name="選択肢1" class="form-control" children=":▼選択してください,選択肢1,その他" post_raw="true"]
    
    //↓ここから非表示:その他を選択したら表示する
    <div class="hidden_etc">
    <span>※「その他」を選択した場合は詳細を入力してください</span><br>
    [mwform_text name="選択肢1のその他" class="form-control"]</div>
    //↑ここまで非表示
    
    </td>
    </tr>
    </tbody>
    </table>
    <style>
    .hidden_etc {
    display:none;
    }
    </style>
    <script>
    jQuery( function($) {
      $(function() {
         $('[name="選択肢1"]').change( function() {
             var result = $(this).val(); 
             if(result === 'その他'){ //その他を選んだ場合
                    $('.hidden_etc').css('display','block');
             } else {
                    $('.hidden_etc').css('display','none');
             }
         }).trigger('change');
      });
    });
    </script>

    ご参考になれば。

    トピック投稿者 kazunoko

    (@kazunoko)

    shokun0803さん、こんにちは。

    記載いただきましたコードで無事、出来るようになりました!
    セレクトボックスの場合は「change」になるのですね、大変勉強になりました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。