以下のようにフォームの値が全てセットされていた場合のみ、送信をするJSがあります。
console.logで確かめますと、何も選択していない場合は(selectは'選択してください'が空)空文字を受け取り、選択するときちんと全ての値が格納されています。
alertも作動するのでJS自体は読み込んでいます。
ただ送信される場合がselectが'選択してください'(カップル、家族などを選択しない)、かつその他の要素を埋めた場合のみです。
つまり、全てのフォームを埋めると送信されません。(selectを'選択してください'にし正規の値を選ぶ)
JS
1 <form action="" method="post"> 2 <div class="box destinationbox"><input id="destination" class="destination" type="text" name="" value="" placeholder="目的地など"></div> 3 <div class="box datebox"> 4 <input id="departuredate" class="departuredate date" stype="text" name="" value="" placeholder="出発日"><input id="returndate" class="returndate date" type="text" name="" value="" placeholder="出発日"> 5 </div> 6 <div class="box lookupbox"> 7 <select name="number" class="lookup styledForm"> 8 <option value="">選択してください</option> 9 <option value="one">大人一名</option> 10 <option value="two">カップル</option> 11 <option value="more">家族・グループ</option> 12 </select><span id="btn" class="lookupbtn disabled btn">検索する</span> 13 </div> 14 </form> 15/*以下JS*/ 16 $(function() { 17 18 function checkForm() { 19 var destination = $('#destination').val(); 20 var departuredate = $('#departuredate').val(); 21 var returndate = $('#returndate').val(); 22 var number = $('[name=number]').val(); 23 console.log(destination); 24 console.log(departuredate); 25 console.log(returndate); 26 console.log(number); 27 if (destination === '' || departuredate === '' || returndate === '' || number || '') { 28 return 'failed'; 29 } else { 30 return ''; 31 } 32 } 33 $('#btn').on('click', function() { 34 35 if (checkForm() === '') { 36 $('form').submit(); 37 } else { 38 alert('全ての項目を選択してください'); 39 } 40 }); 41 });
回答1件
あなたの回答
tips
プレビュー