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

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

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

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

Q&A

解決済

1回答

2608閲覧

text入力とselectの選択で、submitを押せるようにしたい

SteveLight

総合スコア12

JavaScript

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

0グッド

1クリップ

投稿2017/05/19 03:14

編集2017/05/19 09:26

問い合わせフォームをを作成し、その中のmailaアドレスの入力、selectによる選択、textareaの入力で初めて送信ボタンを押せるようにしたいです。
一つのみの項目であればうまくいきますが、項目が複数になると反応してくれません。

###発生しいる問題・エラーメッセー
.submit-btnはdisplay:none;の状態で、非表示です。
入力及び選択済みで、 block要素の .submit-btn-blockを追加しようとしていますが、ボタンは非表示のままで反応がありません。
わたし的にはセレクトの選択で→$o.on( 'click', ckFlag ); というコードが違うのではと考えています。
わかるかたいらしたらこ教授お願いいたします。

私が参考にしたリンクを載せておきます。
リンク先

jsコード

var $s = $( '#submit' ), $t = $( '#mail-id','#text-id' ), $o = $( '#select-id' ); function toggleSubmitClass( flag ){ $s.prop( '.submit-btn', flag ); if ( flag ){ $s.addClass( 'submit-btn' ).removeClass( 'submit-btn-block' ); }else{ $s.addClass( 'submit-btn-block' ).removeClass( 'submit-btn' ); } } function ckFlag(){ var flag = $t.add($o.filter(':checked')).map(function(i,e){return $(e).val() || null}).length == $t.length + $o.length ; toggleSubmitClass( !flag ); } ckFlag(); $o.on( 'click', ckFlag ); $t.on( 'keydown keyup keypress change', ckFlag );

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

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

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

harashow1701

2017/05/19 03:17

自分で書いたコードですか?どこかのコピペですか?
SteveLight

2017/05/19 03:21

自分のフォーム用に一部付け加えましたが、コピーしました。
Lhankor_Mhy

2017/05/19 03:24

$t = $( '#mail-id','#text-id' )はtypoだと思いますのでご確認ください。
kei344

2017/05/19 04:42

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、コードの取得元のURLは記載されたほうが良いと思います。
SteveLight

2017/05/19 09:29

Lhankor_Mhyさん  ご投稿ありがとうございます。確認しましたが間違ってはいないようでした。
SteveLight

2017/05/19 09:30

kei344さん ご指摘ありがとうございました。次回からはそのようにさせていただきます。ご迷惑おかけしました。
Lhankor_Mhy

2017/05/20 00:34 編集

$t = $( '#mail-id','#text-id' ) は意図しているコードであるとのことですが、このコードは「 #text-id の内部要素である #mail-id 」のjQueryオブジェクトを返します( http://api.jquery.com/jQuery/#selector-context )。HTMLが提示されていないため不明ですが、質問の内容から #text-id も #mail-id もフォーム部品だと思いますので、ちょっとありえない構造だと思います。もし本当に、このjQueryコードが間違っていないのであれば、HTML構造に間違いがありそうな気がします。再度確認してみてください。
guest

回答1

0

ベストアンサー

HTMLのソースがないので実態に合わないかもしれませんがこんな感じでどうでしょう

javascript

1$(function(){ 2 $('#hoge').prop('disabled',true); 3 $('.require').on('change',function(){ 4 var flg=true; 5 if( 6 $('input.require[type=text],textarea.require').filter(function(){ 7 return $(this).val()==""; 8 }).length + 9 $('select.require').filter(function(){ 10 return $(this).prop('selectedIndex')==0; 11 }).length > 0) flg=false; 12 $('#hoge').prop('disabled',!flg); 13 }); 14}); 15

必須項目にrequireクラスを付けました

html

1<input type="text" class="require"><br> 2<input type="text" class="require"><br> 3<select class="require"> 4<option value="">---</option> 5<option value="1">1</option> 6<option value="2">2</option> 7<option value="3">3</option> 8</select><br> 9<select class="require"> 10<option value="">---</option> 11<option value="1">1</option> 12<option value="2">2</option> 13<option value="3">3</option> 14</select><br> 15<textarea class="require"></textarea><br> 16<textarea class="require"></textarea><br> 17<input type="submit" value="go" id="hoge"> 18

投稿2017/05/19 04:03

yambejp

総合スコア114572

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

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

SteveLight

2017/05/19 09:47

ほぼやりたいような動作ができました。ちなみにchageの部分をkeyupにすると最後にselctを選択しなければ、textの一文字目でボタンが押せるようになりますが(=リアルタイム)、最後にselectを選択するとtextの文字を再度入力するまでボタンは非表示なのですが、これを最後にselectの選択時(=リアルタイム)でもボタンを押せるようにはできますか? もしよければ簡単な説明だけでも教えていただけませんか?
yambejp

2017/05/19 11:30

$('.require').on('change',function(){ ↓↓↓ $('.require').on('change keyup',function(){ だけではダメですかね?
SteveLight

2017/05/20 00:52

yambejp ご回答ありがとうがざいます。上記の方法でどの項目を最後に入力または、選択してもボタンを押せるようになりました。 ご教授ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問