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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2685閲覧

フォームで特定の項目を入力した場合特定要素を表示したい

castail

総合スコア117

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/11/21 08:26

フォームで特定の項目を入力した場合特定要素を表示したいです。

具体的なフォームの構成は以下の通りです。

lang

1<form action="" method="POST" name="hoge"> 2 3<div class="checkbox"> 4<label onclick=""><input type="checkbox" name="contents[1]" value="1" id="01"><span>チェックボックス1</span></label> 5<label onclick=""><input type="checkbox" name="contents[2]" value="1" id="02"><span>チェックボックス2</span></label> 6<label onclick=""><input type="checkbox" name="contents[3]" value="1" id="03"><span>チェックボックス3</span></label> 7</div> 8 9<input type="text" name="input1" class="required" maxlength="40" value="input1" required=""> 10<input type="text" name="input2" class="required" maxlength="40" value="input2" required=""> 11 12<input type="text" name="input3" maxlength="40" value="input3" required=""> 13<input type="text" name="input4" maxlength="40" value="input3" required=""> 14 15<div class="search_result"> 16<p><input type="submit" name="confirm" value="確認画面へ進む" class="confirm"></p> 17</div> 18</form>

lang

1.search_result { 2 position:fixed; 3 width:100%; 4 height:80px; 5 left:0; 6}

「checkbox」が選択され「required」クラスのinputのみ入力された時点で、非表示状態の「search_result」を画面下部にフロートナビゲーションとして出現したいです。
出現方法はできれば、「bottom:-80px;」で画面外に設定して「bottom:0;」への変化で下から出現するアニメーションで表現できればベターです。

ご教授の程よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

jsかなり汚いですが一応動きました。取り急ぎ。。。
CSSは.search_resultにbottom:-80px;を追加して下さい。
アニメーションはjqueryでやっています。

javascript

1$(function() { 2 $('.required, [type="checkbox"]').on('change keyup', function() { 3 var entered = true; 4 $('[type="checkbox"]').each(function() { 5 var checked = $(this).prop('checked'); 6 if(entered && !checked) { 7 entered = false; 8 } 9 }); 10 $('.required').each(function() { 11 var value = $(this).val(); 12 if(entered && value === '') { 13 entered = false; 14 } 15 }); 16 $('.search_result').animate({ 17 bottom: entered ? '0px' : '-80px' 18 }); 19 }); 20 21});

css

1.search_result { 2 position:fixed; 3 width:100%; 4 height:80px; 5 left:0; 6 bottom:-80px;/* 追加 */ 7}

投稿2015/11/25 15:17

編集2015/11/25 15:19
ShoheiTai

総合スコア897

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

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

castail

2015/12/01 13:01

ご連絡が遅くなり申し訳ございませんでした。 ご教授いただいた内容で実現できました! 感謝いたします。
guest

0

id="required" を付けられるなら…

html

1<input type="text" name="input1" class="required" maxlength="40" value="input1" required="" id="required" onChange="checkForm(this);">

javascript

1<script> 2function checkForm(ctrl){ 3 if(ctrl.value != ""){ 4 if($("#01").prop('checked') || $("#02").prop('checked') || $("#03").prop('checked')){ 5 $("search_result").css("bottom" , 0); 6 } 7 } 8} 9</script>

jqueryを読み込んでcssもbottomのデフォルトを指定して下さい。
試してません。微妙に間違いあるかも。
なんとなくイメージは伝わったでしょうか?
あとid名とかは数字から始まらない方が良いかも?

投稿2015/11/21 09:49

yuki84web

総合スコア1857

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

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

castail

2015/11/21 10:31

ご回答ありがとうございます。 ご指示頂いた処理を加えたのですがうまく動作しませんでした。。。
yuki84web

2015/11/21 11:42

失敬、search_resultのdivにも同じidが必要でした。 あと、idをつけなくても document.forms.hoge.elements.input1.valueとかで要素にアクセス出来ますね。 長ったらしくなってしまいますが。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問