【ContactForm7】radioの選択で非表示にした項目の必須を無効にしたい
- 評価
- クリップ 2
- VIEW 6,151
やりたいこと
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つ作ればOKです。
法人を選択したときに押すボタン、
個人を選択したときに押すボタンって感じですね。
できそうですか?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+1
ContactForm7 のソースコードを見てみたところ、バリデーションをPHPでやっているようですので、以下のような方法があるかと思います。
- test.phpを書き換える。
- ContactForm7 のタグから必須を外して、javascriptでのバリデーションを独自実装する。
- 非表示の必須フォームにダミー文字列を食わせる。
簡単そうなのは3で、ダミーには全角空白を使うといいかと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.09%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2017/02/14 17:48
なるほど、法人/個人の入力項目をボタン丸ごと2個並べてどちらかを表示すると言う事ですね。ContactForm7でのやり方のヒント、または参考サイト等ありましたらお教え願えませんでしょうか。
よろしくお願いします。
ContactForm7のソースを追記しました。