Q&A
状況が再現できるコードに修正してください。
今のままでは何も動きません。
HTMLとjavascriptを使ってselectboxを作成しました
１つ目の項目に’有り’と入れると次のselectboxが表示されるようになっています。
selectboxのみでしたらうまくいったのですが、labelを入れたらlabelは、はじめから非表示にならず
全部出てしまっています。１つ目のバス希望は出ていていいのですが、残りのバスルート及び停留所は、バス希望有りにしないと出ないようにしたいのですが、、、
おまけに項目の必須条件、（入れ忘れ防止）の’正しく入力してください’の文字は全てのselectboxではじめから出てしまっております。
javascripに追加のcodeを入れるところまでは調べてわかったのですが、書き方がよくわからず
詰まっております。
⑴バス希望有り→バスルートのlabelとselectboxが表示される
⑵バスルートを選択すると→停留所のlabelとselectboxが表示される
⑶３つのselectboxに選択がない場合のみ、正しく入力してくださいが出るようにしたい→現在は全て出たままになってしまう
どなたかわかる方教えていただけますか？
HTML
1<head> 2 <meta charset="UTF-8"> 3 <title>formrun.js - Confirm mode</title> 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous"> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script> 6 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script> 7 <script src="https://sdk.form.run/js/v2/formrun.js"></script> 8</head> 9 10<body> 11 12<div class="container"> 13 <h1>formrun.js <small> - Confirm mode</small></h1> 14 15 <div class="card"> 16 <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3> 17 <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3> 18 19 <div class="card-block"> 20 <form class="formrun" action="#" method="get" data-formrun-confirm> 21 <div class="form-group row" 22 data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お名前"> 23 <label class="col-xs-3 col-form-label" for="name">お名前</label> 24 <div class="col-xs-9" data-formrun-hide-if-confirm> 25 <input type="text" class="form-control" id="name" name="お名前" 26 data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"> 27 <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div> 28 </div> 29 <div class="col-xs-9" data-formrun-show-if-confirm> 30 <span data-formrun-confirm-value="お名前"></span> 31 </div> 32 </div> 33 34<div class="form-group row"> 35 <label class="form-control-label">バス希望 <span class="haveto">必須</span></label> 36 <div class="form-control-label" data-formrun-hide-if-confirm> 37 38<select class="form-control" name="バス希望" data-child="#1"> 39 <option value="" selected="selected">選択してください</option> 40 <option value="希望有り">希望有り</option> 41 <option value="希望無し">希望無し</option> 42</select> 43<span class="text-danger" data-formrun-show-if-error="バス希望">正しく入力してください</span> 44 </div> 45 <div class="cp_iptxt" data-formrun-show-if-confirm> 46 <span data-formrun-confirm-value="バス希望"></span> 47 </div> 48 </div> 49 50 51<div class="form-group row"> 52 <label class="form-control-label">バスルート <span class="haveto">必須</span></label> 53 <div class="form-control-label" data-formrun-hide-if-confirm> 54 55<select class="form-control children" id="1" name="バスルート" data-child="#2"> 56 <option value="" selected="selected">ルートを選択してください</option> 57 <option value="①ルート" data-val="希望有り">①ルート</option> 58 <option value="②ルート" data-val="希望有り">②ルート</option> 59</select> 60<span class="text-danger" data-formrun-show-if-error="バスルート">正しく入力してください</span> 61 </div> 62 <div class="cp_iptxt" data-formrun-show-if-confirm> 63 <span data-formrun-confirm-value="バスルート"></span> 64 </div> 65 </div> 66 67 68<div class="form-group row"> 69 <label class="form-control-label">停留所 <span class="haveto">必須</span></label> 70 <div class="form-control-label" data-formrun-hide-if-confirm> 71 72<select class="form-control children" id="2" name="停留所"> 73 <option value="" selected="selected">停留所を選択してください</option> 74 <option value="交差点先" data-val="①ルート">交差点先</option> 75 <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option> 76 <option value="南郵便局前" data-val="①ルート">南郵便局前</option> 77<option value="動物病院前" data-val="②ルート">動物病院前</option> 78<option value="マンション前" data-val="②ルート">マンション前</option> 79<option value="幼稚園前" data-val="②ルート">幼稚園前</option> 80</select> 81<span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span> 82 </div> 83 <div class="cp_iptxt" data-formrun-show-if-confirm> 84 <span data-formrun-confirm-value="停留所"></span> 85 </div> 86 </div> 87<div> 88 <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a> 89 <button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">確認</button> 90 </div> 91 </form> 92 </div> 93 </div> 94 95</div><!-- /.container --> 96 97</body> 98</html> 99
javascript
1<script> 2$('.form-control').on('change', function(){ 3 let $this = $(this), 4 child = $this.data('child'), 5 val = $this.val(); 6 7 if (val) { 8 let op_cnt = 0; 9 $(child).find('option').each(function(){ 10 let op = $(this); 11 if ( ! op.data('val') || op.data('val') == val) { 12 if (op.closest('span.hide').length) { 13 op.unwrap(); 14 } 15 16 if (op.data('val') == val) { 17 op_cnt ++; 18 } 19 } else { 20 if ( ! op.closest('span.hide').length) { 21 op.wrap('<span class="hide">'); 22 } 23 } 24 }); 25 26 if (op_cnt) { 27 $(child).show(); 28 } else { 29 $(child).val('').hide().change(); 30 } 31 } else { 32 $(child).val('').hide().change(); 33 } 34}); 35</script>
CSS
1body { 2 padding: 50px 0 100px; 3}
回答2件
0
ベストアンサー
html
1<body> 2 <div class="container"> 3 <h1>formrun.js <small> - Confirm mode</small></h1> 4 5 <div class="card"> 6 <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3> 7 <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3> 8 9 <div class="card-block"> 10 <form class="formrun" action="#" method="get" data-formrun-confirm> 11 <div class="form-group row" data-formrun-class-if-success="has-success" 12 data-formrun-class-if-error="has-danger" data-formrun-target="お名前"> 13 <label class="col-xs-3 col-form-label" for="name">お名前 <span class="haveto">必須</span></label> 14 <div class="col-xs-9" data-formrun-hide-if-confirm> 15 <input type="text" class="form-control" id="name" name="お名前" data-formrun-required 16 data-formrun-class-if-success="form-control-success" 17 data-formrun-class-if-error="form-control-danger"> 18 <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div> 19 </div> 20 <div class="col-xs-9" data-formrun-show-if-confirm> 21 <span data-formrun-confirm-value="お名前"></span> 22 </div> 23 </div> 24 25 <div class="form-group row"> 26 <label class="form-control-label">バス希望 <span class="haveto">必須</span></label> 27 <div class="form-control-label" data-formrun-hide-if-confirm> 28 29 <select class="form-control" name="バス希望" data-child="#1"> 30 <option value="" selected="selected">選択してください</option> 31 <option value="希望有り">希望有り</option> 32 <option value="希望無し">希望無し</option> 33 </select> 34 <span class="text-danger" data-formrun-show-if-error="バス希望">正しく入力してください</span> 35 </div> 36 <div class="cp_iptxt" data-formrun-show-if-confirm> 37 <span data-formrun-confirm-value="バス希望"></span> 38 </div> 39 </div> 40 41 42 <div class="form-group row"> 43 <label class="form-control-label">バスルート <span class="haveto">必須</span></label> 44 <div class="form-control-label" data-formrun-hide-if-confirm> 45 46 <select class="form-control children" id="1" name="バスルート" data-child="#2"> 47 <option value="" selected="selected">ルートを選択してください</option> 48 <option value="①ルート" data-val="希望有り">①ルート</option> 49 <option value="②ルート" data-val="希望有り">②ルート</option> 50 </select> 51 <span class="text-danger" data-formrun-show-if-error="バスルート">正しく入力してください</span> 52 </div> 53 <div class="cp_iptxt" data-formrun-show-if-confirm> 54 <span data-formrun-confirm-value="バスルート"></span> 55 </div> 56 </div> 57 58 59 <div class="form-group row"> 60 <label class="form-control-label">停留所 <span class="haveto">必須</span></label> 61 <div class="form-control-label" data-formrun-hide-if-confirm> 62 <select class="form-control children" id="root1" name="停留所"> 63 <option value="" selected="selected">停留所を選択してください</option> 64 <option value="交差点先" data-val="①ルート">交差点先</option> 65 <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option> 66 <option value="南郵便局前" data-val="①ルート">南郵便局前</option> 67 </select> 68 <select class="form-control children" id="root2" name="停留所"> 69 <option value="" selected="selected">停留所を選択してください</option> 70 <option value="動物病院前" data-val="②ルート">動物病院前</option> 71 <option value="マンション前" data-val="②ルート">マンション前</option> 72 <option value="幼稚園前" data-val="②ルート">幼稚園前</option> 73 </select> 74 <span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span> 75 </div> 76 <div class="cp_iptxt"> 77 <span class="busStop"></span> 78 </div> 79 </div> 80 <div> 81 <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a> 82 <button type="submit" class="btn btn-primary pull-xs-right" 83 data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" 84 data-formrun-submitting-text="送信中...">確認</button> 85 </div> 86 </form> 87 </div> 88 </div> 89 </div> 90 <script> 91 const select = document.getElementsByClassName("form-control"); 92 const selectWrap = document.getElementsByClassName("form-group"); 93 const btn = document.getElementsByClassName("btn-primary")[0]; 94 const attention = document.getElementsByClassName("text-danger"); 95 const attentionLen = attention.length; 96 const must = document.getElementsByClassName("haveto"); 97 const mustLen = must.length 98 const children2 = document.getElementsByClassName("children")[1]; 99 const root1 = document.getElementById("root1"); 100 const root2 = document.getElementById("root2"); 101 const busStop = document.getElementsByClassName("busStop")[0]; 102 103 select[1].addEventListener("change", () => { 104 if (select[1].value == "希望有り") selectWrap[2].style.display = "block"; 105 if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = ""; 106 if (select[1].value == "希望有り" || select[1].value == "希望無し") { 107 attention[1].style.display = "none"; 108 } 109 }); 110 111 select[2].addEventListener("change", () => { 112 select[3].value = ""; 113 select[4].value = ""; 114 if (select[2].value == "①ルート") { 115 selectWrap[3].style.display = "block"; 116 attention[2].style.display = "none"; 117 root1.style.display = "block" 118 root2.style.display = "none" 119 } else if (select[2].value == "②ルート") { 120 selectWrap[3].style.display = "block"; 121 attention[2].style.display = "none"; 122 root1.style.display = "none" 123 root2.style.display = "block" 124 } 125 }); 126 127 select[3].addEventListener("change", () => { 128 if (!(select[2].value == "")) attention[3].style.display = "none"; 129 }); 130 131 btn.addEventListener("click", (e) => { 132 for (let i = 0; i < mustLen; i++) { 133 must[i].style.display = "none"; 134 } 135 136 if (root1.style.display == "block") { 137 busStop.innerText = root1.value; 138 } else { 139 busStop.innerText = root2.value; 140 } 141 142 if (select[1].value == "" && select[0].value == "") { 143 attention[0].style.display = "block"; 144 attention[1].style.display = "block"; 145 e.preventDefault(); 146 } else if (select[1].value == "希望無し" && !(select[0].value == "")) { 147 for (let i = 0; i < attentionLen; i++) { 148 attention[i].style.display = "none"; 149 } 150 return true; 151 } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "" && select[4].value == "") { 152 setTimeout(() => { 153 btn.innerText = "未入力の項目があります" 154 }, 200); 155 for (let i = 0; i < attentionLen; i++) { 156 if (select[i].value == "") { 157 attention[i].style.display = "block"; 158 } 159 } 160 e.preventDefault(); 161 } 162 }); 163 164 const returnBtn = document.getElementsByClassName("btn-secondary")[0]; 165 166 returnBtn.addEventListener("click", () => { 167 busStop.innerText = ""; 168 for (let i = 0; i < mustLen; i++) { 169 must[i].style.display = "inline"; 170 } 171 }); 172 173 </script> 174 175</body>
投稿2020/12/20 15:48
編集2020/12/27 06:53総合スコア1373
Jon_do様
ありがとうございます。
試してみました。ルートのところまではうまく動いたのですが、停留所は①ルート、②ルート、どちらを選択しても同じものが出てしまいます。select[3]のcodeに何か抜けていますでしょうか？
jqueryはこちらを入れようと思ったのですが、
https://fit-jp.com/selectbox-jq/
CDNの記述がなく、直にサーバーに置かなきゃいけないので、断念してしまいました。
ルート選択があるのを見逃してました。
回答を編集しましたのでまるごとコピペで動きます。
jqueryなら読み込まれてました。
headタグのこの部分がその記述です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
Jon_do様
実装してみました。PCではうまくいきますが、何故か携帯iphoneでやるとバスルートが①でも②でも全て選択できるようになってしまいます。ブラウザによってcodeが違いますでしょうか？
safariの仕様でした。
コード書き換えました。
safariのみoptionにdisplay:noneは効かないそうです。
文字数制限に引っかかったのでbodyタグのみになっています。
前回のコードのbody部分をそのまま入れ替えればokです。
Jon_do様
body部分を入れ替えてみたのですが、今度は
バスルートを希望有りにしても次のselectboxが出なくなってしまいました
select[2].のfor文が抜けてるとかでしょうか？
使っているwordpressのせいでしょうか？
すいません素人で変更箇所は確認できているのですが。。。
どこを直せば直るのかわからずです
ワードプレスなしで試してみて
それでちゃんと動いたらワードプレス側に問題があるということになります。
https://f.easyuploader.app/eu-prd/upload/20201228113736_574c44736845575369684b6b31716a78.html
動作するサンプル。htmlの構成を少し変えてるので送信した場合の動作はphp側を弄る必要があります。
0
Jon_do様
wordpressじゃないので実装したら動きました。何でだろ。調べてみます。いろいろ助けてくださりありがとうございました
投稿2020/12/28 14:29
総合スコア43
あなたの回答
tips
プレビュー
