JavaScriptを使ったフォーム項目の表示/非表示を切り替えるスクリプトが動きません。
(何度もすみません。前回の質問の続きです。)
前回質問させて頂いた内容はご回答者さまのおかげで、無事解決できたのですが、もう一つ問題があることがわかり質問させて頂きます。
フォームsecondBox、thirdBoxのフォームを入力後、入力ミスがあった場合のcontact form7のエラーメッセージがfirstBoxの画面に出ます。(「入力内容に問題があります。確認して再度お試しください。」などです。)
これをfirstBoxはfirstBox。secondBoxはsecondBox。thirdBoxはthirdBox。という風にしたいのです。
下記のコードが関係しているのかと思い素人ながらいじってみましたが、うまくいきません。
よろしくお願いします。
window.onload = entryChange1;
http://5am.jp/javascript/form_change_javascript/
上記のサイトを参考にさせて頂いています。
cmsはwordpressで、プラグインはcontact form7を使用しています。
onclick属性がプラグインで表示されなかったので、下記サイトを参考にfunction.phpに書き込み、表示させました。
よろしくお願いします。
http://kitaney-wordpress.blogspot.jp/2015/03/contact-form-7.html
JavaScript
<script type="text/javascript"> function entryChange1(){ radio = document.getElementsByName('entryPlan') if(radio[0].checked) { //フォーム document.getElementById('firstBox').style.display = ""; document.getElementById('secondBox').style.display = "none"; document.getElementById('thirdBox').style.display = "none"; }else if(radio[1].checked) { //フォーム document.getElementById('firstBox').style.display = "none"; document.getElementById('secondBox').style.display = ""; document.getElementById('thirdBox').style.display = "none"; } }else if(radio[2].checked) { //フォーム document.getElementById('firstBox').style.display = "none"; document.getElementById('secondBox').style.display = "none"; document.getElementById('thirdBox').style.display = ""; } } //オンロードさせ、リロード時に選択を保持 window.onload = entryChange1; </script>
contact form7入力項目(省略しています)
[radio entryPlan id:test use_label_element default:1 "abc" "def"] <div class="cf7-block" id="firstBox"> [text* test id:test class:form-control] [submit class:btn btn-success "送信"] </div>
<div class="cf7-block" id="secondBox"> <p>住所:<br>[number number-info2-age watermark "例) 42"] </p> [submit class:btn btn-success "送信"] </div>
<div class="cf7-block" id="thirdBox"> <p>住所:<br>[number number-info2-age watermark "例) 42"] </p> [submit class:btn btn-success "送信"] </div>
あなたの回答
tips
プレビュー