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

Question

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

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

<form action="" method="POST" name="hoge">

<div class="checkbox">
<label onclick=""><input type="checkbox" name="contents[1]" value="1" id="01"><span>チェックボックス1</span></label>
<label onclick=""><input type="checkbox" name="contents[2]" value="1" id="02"><span>チェックボックス2</span></label>
<label onclick=""><input type="checkbox" name="contents[3]" value="1" id="03"><span>チェックボックス3</span></label>
</div>

<input type="text" name="input1" class="required" maxlength="40" value="input1" required="">
<input type="text" name="input2" class="required" maxlength="40" value="input2" required="">

<input type="text" name="input3" maxlength="40" value="input3" required="">
<input type="text" name="input4" maxlength="40" value="input3" required="">

<div class="search_result">
<p><input type="submit" name="confirm" value="確認画面へ進む" class="confirm"></p>
</div>
</form>

.search_result {
	position:fixed;
	width:100%;
	height:80px;
	left:0;
}

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

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

Answer 1

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

$(function() {
    $('.required, [type="checkbox"]').on('change keyup', function() {
        var entered = true;
        $('[type="checkbox"]').each(function() {
            var checked = $(this).prop('checked');
            if(entered && !checked) {
                entered = false;
            }
        });
        $('.required').each(function() {
            var value = $(this).val();
            if(entered && value === '') {
                entered = false;
            }
        });
        $('.search_result').animate({
            bottom: entered ? '0px' : '-80px'
        });
    });

});

.search_result {
    position:fixed;
    width:100%;
    height:80px;
    left:0;
    bottom:-80px;/* 追加 */
}

Comments

[castail]

ご連絡が遅くなり申し訳ございませんでした。

ご教授いただいた内容で実現できました！
感謝いたします。

Answer 2

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

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

<script>
function checkForm(ctrl){
  if(ctrl.value != ""){
    if($("#01").prop('checked') || $("#02").prop('checked') || $("#03").prop('checked')){
      $("search_result").css("bottom" , 0);
    }
  }
}
</script>

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

Comments

[castail]

ご回答ありがとうございます。

ご指示頂いた処理を加えたのですがうまく動作しませんでした。。。

[yuki84web]

失敬、search_resultのdivにも同じidが必要でした。

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