やりたいこと
transmitMailを使用してメールフォームを作成しています。
ラジオボタンの電話をチェックすると、
メールアドレス入力欄が非表示になり、再度メールにチェックをすると
メールアドレス入力欄が表示される。
というラジオボタンのチェック状況によって表示/非表示を切り替えるところまではできています。
できていないこと
メールにチェックをした場合のみ、メールアドレス入力欄は必須項目となります。
現在、電話にチェックして、メールアドレス入力欄が非表示になっているにも関わらず
バリデーションが効いてしまっていて、確認画面に進むことができていません。
コード①:ラジオボタン選択箇所
html
1 <tr> 2 <th class="required">ご希望の連絡方法</th> 3 <td> 4 <div class="contact-radio"> 5 <label class="contact-radio__item"> 6 <input type="radio" name="ご希望の連絡方法" value="メール" {$checked.ご希望の連絡方法.メール}> 7 メール 8 </label> 9 <label class="contact-radio__item"> 10 <input type="radio" name="ご希望の連絡方法" value="電話" {$checked.ご希望の連絡方法.電話}> 11 電話 12 </label> 13 </div> 14 <input type="hidden" name="required[]" value="ご希望の連絡方法"> 15 {if:$required.ご希望の連絡方法} 16 <div class="contact-note--under">{$required.ご希望の連絡方法}</div> 17 {/if:$required.ご希望の連絡方法} 18 </td> 19 </tr>
コード②:表示/非表示が変わる箇所
html
1 <tr id="js-mailArea"> 2 <th class="required">メールアドレス</th> 3 <td> 4 <div class="contact-paragraph"> 5 <input type="email" name="メールアドレス" value="{$メールアドレス}" class="contact-input" placeholder="info@links-ap.jp"> 6 <input type="hidden" name="email[]" value="メールアドレス"> 7 {if:$email.メールアドレス} 8 {$email.メールアドレス} 9 {/if:$email.メールアドレス} 10 <input type="hidden" name="required[]" value="メールアドレス" class="requireMail"><!-- ←必須の記述① --> 11 {if:$required.メールアドレス} 12 <div class="contact-note--under font-bold font-red">{$required.メールアドレス}</div> 13 {/if:$required.メールアドレス} 14 </div> 15 <div class="contact-paragraph"> 16 <p class="contact-note--top">確認のため、もう一度ご入力ください。</p> 17 <input type="email" name="メールアドレス確認用" value="{$メールアドレス確認用}" class="contact-input" placeholder="info@links-ap.jp"> 18 <input type="hidden" name="match[]" value="メールアドレス メールアドレス確認用"> 19 {if:$match.メールアドレス} 20 <div class="contact-note--under font-bold font-red">{$match.メールアドレス}</div> 21 {/if:$match.メールアドレス} 22 <input type="hidden" name="required[]" value="メールアドレス確認用" class="requireMail"><!-- ←必須の記述② --> 23 {if:$required.メールアドレス確認用} 24 <div class="contact-note--under">{$required.メールアドレス確認用}</div> 25 {/if:$required.メールアドレス確認用} 26 </div> 27 </td> 28 </tr>
※電話の方は一旦割愛させていただきます。必要でしたら記載します。
javascript
1 2const mailArea = document.getElementById('js-mailArea'); 3const telArea = document.getElementById('js-telArea');//割愛している電話エリアの指定 4const form = document.getElementById('formArea'); 5const targets = document.getElementById('requireMail'); 6const value = targets.getAttribute(name); 7const elm = document.querySelectorAll('.requireMail[name="require[]"]');//設定はしているものの使い方がわからない 8 9let result = null; 10const radios = document.getElementsByName('ご希望の連絡方法'); 11 12const output = () => { 13 for(let i = 0;i < radios.length;i++) { 14 if(radios[i].checked) { 15 result = radios[i].value; 16 if(result === 'メール') { 17 mailArea.classList.remove('is-hidden');//is-hiddenをつけるとエリアが非表示になる 18 telArea.classList.add('is-hidden'); 19 } else { 20 telArea.classList.remove('is-hidden'); 21 mailArea.classList.add('is-hidden'); 22 } 23 } 24} 25} 26 27form.addEventListener('change',()=> { 28 output(); 29});
試したこと
※1<input type="hidden" name="required[]" value="メールアドレス確認用" class="requireMail">
→これ(※1)が必須項目とさせている記述になるので、
電話を選択した時だけ「.requireMail」のname値「required[]」を空に
書き換えてしまおうと考えたのですが書き方が検討つきませんでした。
それなら、この(※1)記述自体を削除してしまおうとしたのですが
再度メールにチェックした際にこの要素が復活せず・・
(jqueryでいう、「append」や「detach」を使って削除した要素を復活できないのかなと考えていたが、javascriptで代わりのものが見つからなかった。)
例:https://www.sejuku.net/blog/39300#i-3
ちなみに、このTransmitMailには、バリデーションを考慮した上
でチェック状態によって出し分ける設定が用意されていないようです。
※ソース
https://github.com/dounokouno/TransmitMail/issues/2
TransmitMailで利用しているテンプレートには、if文の比較演算がありません。ですので、「ラジオボタンの選択内容を判別して表示を切り替える」ことはできません
正直全くわからないので・・・何かヒントでも回答でも
なんでもいただけたら嬉しいです。
よろしくお願いします。
追記
皆様のアドバイスを元に完成したものを一応記載します。
disabledの付け外しが少し苦戦したのでどなたかの参考になれば幸いです。
(もっと効率いい書き方はあると思いますが・・)
forEach文は勉強中のためfor文で。
javascript
1let hiddenAdd; 2let hiddenRemove; 3//属性を追加 4const hiddenAddFunc = (hiddenAdd) => { 5 for(let i = 0;i < hiddenAdd.length;i++) { 6 hiddenAdd[i].setAttribute('disabled','disabled'); 7 } 8} 9//属性を削除 10const hiddenRemoveFunc = (hiddenRemove) => { 11 for(let i = 0;i < hiddenRemove.length;i++) { 12 hiddenRemove[i].removeAttribute('disabled'); 13 } 14} 15//判定文 16let flag = 0; 17const hantei = (flag) => { 18 if(flag === 1) { 19 let hiddenAdd = telArea.querySelectorAll('input'); 20 let hiddenRemove = mailArea.querySelectorAll('input'); 21 hiddenAddFunc(hiddenAdd); 22 hiddenRemoveFunc(hiddenRemove); 23 } else if(flag === 2) { 24 let hiddenAdd = mailArea.querySelectorAll('input'); 25 let hiddenRemove = telArea.querySelectorAll('input'); 26 hiddenAddFunc(hiddenAdd); 27 hiddenRemoveFunc(hiddenRemove); 28 } 29} 30 31const output = () => { 32 for(let i = 0;i < radios.length;i++) { 33 if(radios[i].checked) { 34 result = radios[i].value; 35 if(result === 'メール') { 36 mailArea.classList.remove('is-hidden'); 37 telArea.classList.add('is-hidden'); 38 let flag = 1; 39 hantei(flag); 40 } else { 41 telArea.classList.remove('is-hidden'); 42 mailArea.classList.add('is-hidden'); 43 let flag = 2; 44 hantei(flag); 45 } 46 47 } 48} 49}

回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/16 03:56