CODEWITHSUNDEEP
jquery
bjtilley
bjtilley

Reputation: 1970

Jquery display div based on form input

Is there a way to use jQuery to display a div based on the input in a formfield.

For example if the value typed in the formfield is between 1 and 5 show a div.

Upvotes: 2

Views: 1741

Answers (2)

alex
alex

Reputation: 490213

var div = $('div').hide();

$('input').keyup(function() {

   var value = this.value;

   if (value > 1 && value < 5) {
       div.fadeIn();
   } else {
       div.fadeOut();   
   }

});

See it on jsFiddle.

If you don't want it to reset itself when blank, add this after declaring and defining value...

if (value === '') {
   return;    
}

Upvotes: 3

leeny
leeny

Reputation: 626

Start with the div being hidden. Add a handler to form field's keyup event. In handler, check if value meets criteria, then .show() your div.

Upvotes: 2

Related Questions