CODEWITHSUNDEEP
jquery
user1086253
user1086253

Reputation: 13

Show DIV when text is entered

I have tried everything to get this to work on ALL platforms. What am I doing wrong?

JS--

$(document).ready(function(){
    $('#gname').keypress(function() {
       if ($(this).val() == "Toys") 
          $('#number').slideDown('fast')
       else 
          $('#number').hide();
    });
});

CSS--

#number { display: none; height: 100px; border: solid 1px #ddd; }

HTML--

Type here:<input type="text" id="gname">
<div id="number">
    Test 
</div>

Upvotes: 0

Views: 4632

Answers (6)

Mr Lister
Mr Lister

Reputation: 46579

And your source doesn't actually show the div. The div starts invisible, and the js either slides it away or hides it, but doesn't make it visible.

PS whoever edited the original question made a mess of it I'm afraid. There's a lot missing now.

Edit: ah, I see that's corrected now.

Upvotes: 0

Jasper
Jasper

Reputation: 76003

If you bind to the keyup event rather than keypress the value will have been changed by the time the event handler runs: http://jsfiddle.net/azHQz/

$(function(){
    $('#gname').on('keyup', function(event) {
        //if (event.keyCode == 13) {//un-comment this to only check the value when the enter key is pressed
            if ($(this).val() == "Toys")
                $('#number').slideDown('fast')
            else
                $('#number').hide();
        //}//un-comment this to only check the value when the enter key is pressed
    });
});

A demo for only checking the value when the enter key is pressed: http://jsfiddle.net/azHQz/1/

Upvotes: 1

defau1t
defau1t

Reputation: 10619

Actually it is working perfectly, since you have given display none to your div id, so it works behind the scenes which you are unable to see. Remove the display none property and it should work

DEMO

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77986

Include JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

CSS: 

#number {
    display:none;
}

JQuery: 

$('#gname').bind('keyup change',function(){
    if(this.value.length > 0){
        $('#number').show();
    }
    else {
        $('#number').hide();
    }
});

Demo: http://jsfiddle.net/pSLhN/

Upvotes: 2

MetalFrog
MetalFrog

Reputation: 10523

First, you need to include jQuery (pretty sure you know this, and just left it out of the demo, but you need it.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

Then, you should be checking on the keyup event.

$(document).ready(function(){
   $('#gname').keyup(function() {
      if ($(this).val() == "Toys") 
         $('#number').slideDown('fast')
      else 
         $('#number').hide();
   });

});

Upvotes: 0

George Cummins
George Cummins

Reputation: 28906

Your script references jQuery functionality but does not include a jQuery library. Please include jQuery into your document to activate this functionality.

Place the following in the head of your document before the first use of $:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Upvotes: 2

Related Questions