質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1576閲覧

JSの条件分岐が上手く行かない

Chandler_Bing

総合スコア673

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/02/09 09:55

以下のようにフォームの値が全てセットされていた場合のみ、送信をする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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/02/09 10:09

おそらく、typoがあります。 destination === '' || departuredate === '' || returndate === '' || number || '' ↓ destination === '' || departuredate === '' || returndate === '' || number === '' こうでは?
Chandler_Bing

2019/02/09 10:57

その通りでした。ありがとうございます。
miyabi_takatsuk

2019/02/09 15:44

解決したなら、Lhankor_Mhyさんのコメントのおかげなりと記載し、自身回答にて解決済にしましょう。 Lhankor_Mhyさんのコメント通りに修正すれば、期待した動きになるかと思います。
guest

回答1

0

自己解決

Lhankor_Mhy様の回答通りでございます。
ありがとうございます。

destination === '' || departuredate === '' || returndate === '' || number || ''

destination === '' || departuredate === '' || returndate === '' || number === ''

投稿2019/02/09 18:00

Chandler_Bing

総合スコア673

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問