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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

解決済

1回答

3884閲覧

jqueryで複数のフォームの場合、選択をせずsubmitを押した場合アラートを出す

mojao_0227

総合スコア24

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

0グッド

0クリップ

投稿2017/01/22 08:33

###jqueryで複数のフォームの場合、選択をせずsubmitを押した場合アラートを出す
jqueryで複数のフォームを作り、移遷先が違うのでどちらかのformで選択せずにsubmitを押した場合に"選択してください"というアラートを出したいです。
行き詰まってしまっているのでご教授頂けると幸いです。
アドバイスよろしくお願い致します。

###発生している問題・エラーメッセージ
現状のjqueryでは1つ目のformに対してのアラートは出るのですが、2つ目のフォームにアラートが出ず、404表示の状態です。

###該当のソースコード

haml

1%section 2 %ul 3 %li 4 %form{:method => "get", :action => "/products/1"} 5 .custom 6 %select#form{:name => "size", :style => ""} 7 %option{:value => "", :selected => "selected"} 選択してください 8 %option{:value => "1"}9 %option{:value => "2"}10 %option{:value => "3"}11 %input{:type => "hidden", :name => "product", :value => "blouse"} 12 %button.submit{:type => "submit"} 注文する 13 %li 14 %form{:method => "get", :action => "/products/2"} 15 .custom 16 %select#form{:name => "size", :style => ""} 17 %option{:value => "", :selected => "selected"} 選択してください 18 %option{:value => "1"}19 %option{:value => "2"}20 %option{:value => "3"}21 %input{:type => "hidden", :name => "product", :value => "onepiece"} 22 %button.submit{:type => "submit"} 注文する

javascript

1 $('form').submit(function(){ 2 var val = $('[name=size]').val(); 3 if(val===''){ 4 alert('選択をしてください'); 5 return false; 6 } 7 });

###試したこと
formにrequiredは試したのですがsafariなど一部のブラウザで対応できませんでした。

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

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

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

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

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

guest

回答1

0

ベストアンサー

$('[name=size]').val();

このコードは、どちらのフォームがsubmitされたか関係なく、[name=size] にマッチする一つ目の要素の value を返します。

解決策としては、submitしたformの[name=size] にマッチするように変更すればおkです。

javascript

1 $('form').submit(function(){ 2 var val = $('[name=size]', this).val(); // 第2引数にthis(==submitされたform)を指定 3 if(val===''){ 4 alert('選択をしてください'); 5 return false; 6 } 7 });

$('[name=size]', this)
このコードは、submitされた<form>の中から[name=size]にマッチする要素を探すことを意味します。

投稿2017/01/22 08:46

kura

総合スコア368

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

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

mojao_0227

2017/01/22 09:07

ありがとうございました、解決できました! よく理解できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問