Jquery display div based on form input

Question

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.

alex · Accepted Answer · 2011-01-11 23:48:16Z

3

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;    
}

answered Jan 11, 2011 at 23:48

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leeny · Accepted Answer · 2011-01-11 23:42:21Z

2

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.

answered Jan 11, 2011 at 23:42

leeny

6163 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery display div based on form input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related