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

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

新規登録して質問してみよう
ただいま回答率
86.12%
WordPress

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

PHP

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

JavaScript

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

解決済

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

seiji_maemura
seiji_maemura

総合スコア129

WordPress

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

PHP

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

JavaScript

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

2回答

1リアクション

2クリップ

8022閲覧

投稿2017/02/14 08:13

編集2017/02/15 08:06

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

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>

PHP

<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に追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。

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

javascript

<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>
Lhankor_Mhy👍を押しています

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

WordPress

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

PHP

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

JavaScript

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