Show div on text entry

Question

Hello, I have a form and I'd like to show a div based on the entered text in a text field. The script I'm using works just fine on my latest version of chrome but it doesn't work on IE or any of my members browswers. What they heck is wrong with the script?

    <script>
$('document').ready(function(){
$('#gname').change(function() {
($(this).val() == "NBA 2k10") ? 
$('#number').slideDown('fast') : $('#number').hide();
})
});
</script>

Answer 1

$("document") isn't a valid selector in other browsers, you need $(document), like this overall:

$(document).ready(function(){
  $('#gname').keyup(function() { //probably want keyup instead of change here
    if ($(this).val() == "NBA 2k10") 
      $('#number').slideDown('fast')
    else 
      $('#number').hide();
  });
});

You can test it here.

$(document).ready(function(){ can also just be $(function(){. $("document") doesn't work because it's looking for <document> element, which doesn't exist.

The if/else change is just to make it a bit cleaner overall, it's somewhat preference, but generally speaking your conditional statements shouldn't have side effects, that's not their intention. You can use them that way, but it's better to be explicit, at least in my opinion.

Answer 2

It probably fires in IE only after the input has lost focus. If you want to detect text change (cross-browser) before the focus on the input is lost, try keyup or keypress.

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