teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

ヒントを元に、意図した挙動に成功しました。

2017/02/15 08:06

投稿

seiji_maemura
seiji_maemura

スコア129

title CHANGED
File without changes
body CHANGED
@@ -87,76 +87,6 @@
87
87
  </table>
88
88
  </div>
89
89
  ```
90
- ```HTML
91
- <div>
92
- <table>
93
- <tbody>
94
- <tr>
95
- <th><span class="type01">必須</span>法人/個人</th>
96
- <td><span class="wpcf7-form-control-wrap entrySecond">
97
- <span class="wpcf7-form-control wpcf7-radio">
98
- <span class="wpcf7-list-item first">
99
- <label><input onclick="entryForm();" name="entrySecond" value="法人" type="radio">&nbsp;<span class="wpcf7-list-item-label">法人</span></label>
100
- </span>
101
- <span class="wpcf7-list-item last">
102
- <label><input onclick="entryForm();" name="entrySecond" value="個人" type="radio">&nbsp;<span class="wpcf7-list-item-label">個人</span></label>
103
- </span>
104
- </span>
105
- </span>
106
- </td>
107
- </tr>
108
- </tbody>
109
- </table>
110
- <table>
111
- <tbody>
112
- <tr id="corporation01">
113
- <th><span class="type01">必須</span>貴社名</th>
114
- <td><span class="wpcf7-form-control-wrap office_name"><input name="office_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="cnver1" aria-required="false" aria-invalid="false" type="text"></span></td>
115
- </tr>
116
- <tr id="corporation02">
117
- <th><span class="type01">必須</span>貴社名(ふりがな)</th>
118
- <td><span class="wpcf7-form-control-wrap office_s_name"><input name="office_s_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="cnver2" aria-required="false" aria-invalid="false" type="text"></span></td>
119
- </tr>
120
- <tr id="corporation03">
121
- <th><span class="type02">任意</span>部署名</th>
122
- <td><span class="wpcf7-form-control-wrap department"><input name="department" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
123
- </tr>
124
- <tr>
125
- <th><span class="type01">必須</span>お名前</th>
126
- <td><span class="wpcf7-form-control-wrap user_name"><input name="user_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span></td>
127
- </tr>
128
- <tr>
129
- <th><span class="type01">必須</span>お名前(ふりがな)</th>
130
- <td><span class="wpcf7-form-control-wrap user_s_name"><input name="user_s_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span></td>
131
- </tr>
132
- <tr>
133
- <th><span class="type02">任意</span>郵便番号</th>
134
- <td><span class="wpcf7-form-control-wrap zip"><input name="zip" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
135
- </tr>
136
- <tr>
137
- <th><span class="type02">任意</span>ご住所</th>
138
- <td><span class="wpcf7-form-control-wrap address"><input name="address" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
139
- </tr>
140
- <tr>
141
- <th><span class="type02">任意</span>電話番号</th>
142
- <td><span class="wpcf7-form-control-wrap tel_number"><input name="tel_number" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" type="tel"></span></td>
143
- </tr>
144
- <tr>
145
- <th><span class="type02">任意</span>FAX番号</th>
146
- <td><span class="wpcf7-form-control-wrap fax_number"><input name="fax_number" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" type="tel"></span></td>
147
- </tr>
148
- <tr>
149
- <th><span class="type01">必須</span>メールアドレス</th>
150
- <td><span class="wpcf7-form-control-wrap email"><input name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" type="email"></span></td>
151
- </tr>
152
- <tr>
153
- <th><span class="type01">必須</span>メールアドレス(再入力)</th>
154
- <td><span class="wpcf7-form-control-wrap email_confirm"><input name="email_confirm" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" type="email"></span></td>
155
- </tr>
156
- </tbody>
157
- </table>
158
- </div>
159
- ```
160
90
  ###現在の状態
161
91
  参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。
162
92
  しかし、隠した項目に必須項目があり見た目上見えないだけで、入力のバリデーションチェックが入りエラーとなって、送信が一向に完了しませんでした。
@@ -164,4 +94,39 @@
164
94
  条件にsetAttribute("aria-required", false);などと追記してみたものの効果がありませんでした。
165
95
 
166
96
  最悪隠す項目は必須を外す予定です。
167
- プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。
97
+ プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。
98
+
99
+ ###その後の進捗
100
+ ヒントを頂いて、無事意図した動きを実現できました。
101
+ その完成ソースです。
102
+ ```javascript
103
+ <script type="text/javascript">
104
+ function entryForm() {
105
+ radio = document.getElementsByName('entrySecond');
106
+ var textValue_F = document.getElementById('cnver1');
107
+ var textValue_S = document.getElementById('cnver2');
108
+ if (radio[0].checked) {
109
+ document.getElementById('corporation01').style.display = "";
110
+ document.getElementById('corporation02').style.display = "";
111
+ document.getElementById('corporation03').style.display = "";
112
+ //ダミー文字をリセット
113
+ textValue_F.value = '';
114
+ textValue_S.value = '';
115
+ } else if (radio[1].checked) {
116
+ document.getElementById('corporation01').style.display = "none";
117
+ document.getElementById('corporation02').style.display = "none";
118
+ document.getElementById('corporation03').style.display = "none";
119
+ textValue_F.value = 'ダミー文字';
120
+ textValue_S.value = 'ダミー文字';
121
+ } else {
122
+ document.getElementById('corporation01').style.display = "none";
123
+ document.getElementById('corporation02').style.display = "none";
124
+ document.getElementById('corporation03').style.display = "none";
125
+ textValue_F.value = 'ダミー文字';
126
+ textValue_S.value = 'ダミー文字';
127
+ }
128
+ }
129
+ //オンロードさせ、リロード時に選択を保持
130
+ window.onload = entryForm;
131
+ </script>
132
+ ```

1

ContactForm7に張り付けているソースを追記しました。

2017/02/15 08:06

投稿

seiji_maemura
seiji_maemura

スコア129

title CHANGED
File without changes
body CHANGED
@@ -31,6 +31,62 @@
31
31
  window.onload = entryForm;
32
32
  </script>
33
33
  ```
34
+ ```PHP
35
+ <div>
36
+ <table>
37
+ <tr>
38
+ <th><span class="type01">必須</span>法人/個人</th>
39
+ <td>[radio entrySecond use_label_element "法人" "個人"]</td>
40
+ </tr>
41
+ </table>
42
+ <table>
43
+ <tr id="corporation01">
44
+ <th><span class="type01">必須</span>貴社名</th>
45
+ <td>[text* office_name id:cnver1]</td>
46
+ </tr>
47
+ <tr id="corporation02">
48
+ <th><span class="type01">必須</span>貴社名(ふりがな)</th>
49
+ <td>[text* office_s_name id:cnver2]</td>
50
+ </tr>
51
+ <tr id="corporation03">
52
+ <th><span class="type02">任意</span>部署名</th>
53
+ <td>[text department]</td>
54
+ </tr>
55
+ <tr>
56
+ <th><span class="type01">必須</span>お名前</th>
57
+ <td>[text* user_name]</td>
58
+ </tr>
59
+ <tr>
60
+ <th><span class="type01">必須</span>お名前(ふりがな)</th>
61
+ <td>[text* user_s_name]</td>
62
+ </tr>
63
+ <tr>
64
+ <th><span class="type02">任意</span>郵便番号</th>
65
+ <td>[text zip]</td>
66
+ </tr>
67
+ <tr>
68
+ <th><span class="type02">任意</span>ご住所</th>
69
+ <td>[text address]</td>
70
+ </tr>
71
+ <tr>
72
+ <th><span class="type02">任意</span>電話番号</th>
73
+ <td>[tel tel_number]</td>
74
+ </tr>
75
+ <tr>
76
+ <th><span class="type02">任意</span>FAX番号</th>
77
+ <td>[tel fax_number]</td>
78
+ </tr>
79
+ <tr>
80
+ <th><span class="type01">必須</span>メールアドレス</th>
81
+ <td>[email* email]</td>
82
+ </tr>
83
+ <tr>
84
+ <th><span class="type01">必須</span>メールアドレス(再入力)</th>
85
+ <td>[email* email_confirm]</td>
86
+ </tr>
87
+ </table>
88
+ </div>
89
+ ```
34
90
  ```HTML
35
91
  <div>
36
92
  <table>
@@ -100,7 +156,6 @@
100
156
  </tbody>
101
157
  </table>
102
158
  </div>
103
- コード
104
159
  ```
105
160
  ###現在の状態
106
161
  参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。