CODEWITHSUNDEEP
javascriptjqueryhtml
Matt
Matt

Reputation: 31

How to dynamically hide a div with the value in a text box

I am building a website where I need to be able to dynamically hide a div based on a number entered in a textbox.

As the user enters "0", I need a div to hide. If the user enters any other number, I need the div to show.

Is there a way to do that?

I have looked at a lot of examples, but they are all based around sorting or using a filter which is completely different than what I am wanting.

Any help would be appreciated

Upvotes: 0

Views: 1811

Answers (2)

Dinesh Chitlangia
Dinesh Chitlangia

Reputation: 590

Here is a working example JSFiddle

HTML

<div id="myDiv">
    This Div will be hidden when you enter zero.
</div>

<input type="text" id="userInput"/>

JQuery

$('#userInput').on('input',function(){
    if( $(this).val() == 0 )
        $('#myDiv').hide();
    else
        $('#myDiv').show();
});

Explanation: .on() is used to attach an event handler function for one or more events to the selected elements.

Here is the syntax: 

.on( events [, selector ] [, data ], handler )

For more details on this function refer the JQuery documentation

Upvotes: 1

rrk
rrk

Reputation: 15846

You can do it on change event. You can use on() function for binding events.

$('yourInputSelector').on('input',function(){
    if( $(this).val() == 0 )
        $('yourDiv').show();
    else
        $('yourDiv').show();
});

Upvotes: 0

Related Questions