• 解決済 suca06

    (@suca06)


    MW WP FORMでつくっているフォームで、
    ラジオボタンの項目Aが選択されたら
    <div class=”open”>の中にあるテキストボックスを表示させて入力したいと思っています。
    <div class=”open”>のテキストボックスは必須にしています。

    ①Aを選んで<div class=”open”>のテキストボックスに入力して
    「確認」だと問題なく確認画面にいきますが

    ②Aを選んで<div class=”open”>のテキストボックスを空欄で
    「確認」だと<div class=”open”>が非表示(display: none;)になってしまいます。
    必須項目になっているので、テキストボックスに入力したくても
    非表示になってしまっているので、できない状態です。

    ②テキストボックスを空欄で「確認」ボタンを押した場合に、<div class=”open”>が非表示にならないようにしたいですが、どのようにしたらいいかわかりませんでした。
    また、①で確認画面に行けても、そのあと入力画面に戻ると、この場合も<div class=”open”>が非表示になっていて、他の項目の「BかC」を選んで再び「A」を選ばないと表示されませんでした。

    <フォームの中身>

    <div class="item">
    <input type="radio" name="項目" value="A">
    <input type="radio" name="項目" value="B">
    <input type="radio" name="項目" value="C">
    </div>
    <div class="open" style="display: none;">
    <input type="text" name="テキスト" size="60" value="">
    </div>

    <一応、MW WP FORMで記述している中身>

    <div class="item">
    [mwform_radio name="項目" children="A,B,C"]
    </div>
    <div class="open">
    [mwform_text name="テキスト"]
    </div>
    
    [mwform_bconfirm value="confirm"]確認[/mwform_bconfirm]
    [mwform_bsubmit name="mwform_bsubmit-927" value="send"]送信[/mwform_bsubmit]
    [mwform_bback value="back"]戻る[/mwform_bback]

    <jsの中身>

    jQuery(function() {
    jQuery('[name="項目"]:radio').change(function() {
    jQuery(".open").hide();
    if (jQuery("input:radio[name='項目']:checked").val() == "A") {
    jQuery('.open').show();
    }
    }).trigger('change');
    });
    //確認画面の処理
    jQuery(function($){
    var area = ($('.mw_wp_form_confirm .item').html());
    if ( area && area.indexOf('A') != -1) {
    $('.open').show();
    }else {
    $('.open').hide();
    }
    });

    いつもご教示いただき本当に感謝しています。
    どうぞご教示お願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • <div class="open" style="display: none;">
    とりあえず、JavaScriptが使えない環境も考慮して、ここで非表示にするのはやめたほうが良いのでは?

    トピック投稿者 suca06

    (@suca06)

    ありがとうございました!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「MW WP Form選択した値によって表示切替」には新たに返信することはできません。