質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • PHP

    23487questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19815questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    8722questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

【ContactForm7】radioの選択で非表示にした項目の必須を無効にしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 3,583

seiji_maemura

score 113

やりたいこと

javascriptは拾ってきたソースを分かる範囲で改変して使用する程度の素人です。
radioで一方を選択した場合、javascriptで項目を隠し、必須である項目を無効化にしたい。(必須のまま隠すので入力漏れとなり送信完了出来ない)
何かしらヒントでもいただければと思いますので、よろしくお願いいたします。

ソース

<script type="text/javascript">
    function entryForm(){
        radio = document.getElementsByName('entrySecond')
        if(radio[0].checked) {
            document.getElementById('corporation01').style.display = "";
            document.getElementById('corporation02').style.display = "";
            document.getElementById('corporation03').style.display = "";
            document.getElementById('cnver1').setAttribute("aria-required", true);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", true);//必須を外そうとした名残
        }else if(radio[1].checked) {
            document.getElementById('corporation01').style.display = "none";
            document.getElementById('corporation02').style.display = "none";
            document.getElementById('corporation03').style.display = "none";
            document.getElementById('cnver1').setAttribute("aria-required", false);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", false);//必須を外そうとした名残
        }else{
            document.getElementById('corporation01').style.display = "none";
            document.getElementById('corporation02').style.display = "none";
            document.getElementById('corporation03').style.display = "none";
            document.getElementById('cnver1').setAttribute("aria-required", false);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", false);//必須を外そうとした名残
        }
    }
    //オンロードさせ、リロード時に選択を保持
    window.onload = entryForm;
</script>
<div>
    <table>
        <tr>
            <th><span class="type01">必須</span>法人/個人</th>
            <td>[radio entrySecond use_label_element "法人" "個人"]</td>
        </tr>
    </table>
    <table>
        <tr id="corporation01">
            <th><span class="type01">必須</span>貴社名</th>
            <td>[text* office_name id:cnver1]</td>
        </tr>
        <tr id="corporation02">
            <th><span class="type01">必須</span>貴社名(ふりがな)</th>
            <td>[text* office_s_name id:cnver2]</td>
        </tr>
        <tr id="corporation03">
            <th><span class="type02">任意</span>部署名</th>
            <td>[text department]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>お名前</th>
            <td>[text* user_name]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>お名前(ふりがな)</th>
            <td>[text* user_s_name]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>郵便番号</th>
            <td>[text zip]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>ご住所</th>
            <td>[text address]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>電話番号</th>
            <td>[tel tel_number]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>FAX番号</th>
            <td>[tel fax_number]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>メールアドレス</th>
            <td>[email* email]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>メールアドレス(再入力)</th>
            <td>[email* email_confirm]</td>
        </tr>
    </table>
</div>

現在の状態

参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。
しかし、隠した項目に必須項目があり見た目上見えないだけで、入力のバリデーションチェックが入りエラーとなって、送信が一向に完了しませんでした。

条件にsetAttribute("aria-required", false);などと追記してみたものの効果がありませんでした。

最悪隠す項目は必須を外す予定です。
プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。

その後の進捗

ヒントを頂いて、無事意図した動きを実現できました。
その完成ソースです。

<script type="text/javascript">
function entryForm() {
    radio = document.getElementsByName('entrySecond');
    var textValue_F = document.getElementById('cnver1');
    var textValue_S = document.getElementById('cnver2');
    if (radio[0].checked) {
        document.getElementById('corporation01').style.display = "";
        document.getElementById('corporation02').style.display = "";
        document.getElementById('corporation03').style.display = "";
        //ダミー文字をリセット
        textValue_F.value = '';
        textValue_S.value = '';
    } else if (radio[1].checked) {
        document.getElementById('corporation01').style.display = "none";
        document.getElementById('corporation02').style.display = "none";
        document.getElementById('corporation03').style.display = "none";
        textValue_F.value = 'ダミー文字';
        textValue_S.value = 'ダミー文字';
    } else {
        document.getElementById('corporation01').style.display = "none";
        document.getElementById('corporation02').style.display = "none";
        document.getElementById('corporation03').style.display = "none";
        textValue_F.value = 'ダミー文字';
        textValue_S.value = 'ダミー文字';
    }
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryForm;
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

送信ボタンを2つ作ればOKです。
法人を選択したときに押すボタン、
個人を選択したときに押すボタンって感じですね。
できそうですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/14 17:48

    ご回答いただきまして、ありがとうございます。
    なるほど、法人/個人の入力項目をボタン丸ごと2個並べてどちらかを表示すると言う事ですね。ContactForm7でのやり方のヒント、または参考サイト等ありましたらお教え願えませんでしょうか。
    よろしくお願いします。

    ContactForm7のソースを追記しました。

    キャンセル

checkベストアンサー

+1

ContactForm7 のソースコードを見てみたところ、バリデーションをPHPでやっているようですので、以下のような方法があるかと思います。

  1. test.phpを書き換える。
  2. ContactForm7 のタグから必須を外して、javascriptでのバリデーションを独自実装する。
  3. 非表示の必須フォームにダミー文字列を食わせる。

簡単そうなのは3で、ダミーには全角空白を使うといいかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/14 18:34

    ご回答いただきまして、ありがとうございます。
    ③が何となくイメージがわきました!
    ググった感じだと(http://mrorm.jpn.org/memolog/javascript/entry1077.html)このサイトのような事でしょうか?

    キャンセル

  • 2017/02/14 19:37

    そうですね、こんな感じです。PHPのソースを見る限りホワイトスペース文字は未入力と判定するようなので、ダミー文字列は半角ではなくて全角空白をおすすめします。

    キャンセル

  • 2017/02/15 10:31

    ありがとうございます!
    既存のifにダミーを入れるif部分の移植な感じでしょうか。
    頑張ってみます。ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • PHP

    23487questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19815questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    8722questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。