Hide div when input has text?

Question

This ain't for use on a larger scale just a small personal site, but how would I go about hiding a div when input matches a query? I've seen this fiddle, however it just hides div based on any input, whereas I'm looking for it to match an exact value.

http://jsfiddle.net/P78Wc/

I thought changing

if ($(this).val() != '') $('#yeah').show();

to

if ($(this).val() != 'word') $('#yeah').show();

It would have to match that word however that's not the case.

Any help would be great thanks.

Solution is here:

http://jsfiddle.net/96urc0aj/

Change the word test to the word you wish to use.

Answer 1

The code above includes != which means does not equal, but to check when the input MATCHES a query use $(this).val()==="query" . To clarify, you should use === not != . Let me know if this helps!

Answer 2

The following should work (written from the perspective of always showing):

<label for="db">Type whatever</label>
<input type="text" name="amount" />
</select>
<div id="yeah">
    <input type="submit" />
</div>

$('input').keyup(function () {
    if ($(this).val() === 'work' ) {
        $('#yeah').hide();
    } else if ($('#yeah').is(":hidden") && $(this).val() !== 'work'){
        $('#yeah').show(); 
    }
});

Answer 3

Try this to hide the value when you have input as "word"

<label for="db">Type whatever</label>
<input type="text" name="amount" />
<div id="yeah" style="display:block;">
    <input type="submit" />
</div>

$('input').keyup(function () {
    if ($(this).val() == 'word') $('#yeah').hide();    
});

Answer 4

Just in case if someone need this solution in pure JavaScript:

 const input = document.querySelector('input'); input.addEventListener('keyup', (event) => { const { target } = event; const yeah = document.querySelector('#yeah'); if (target.value === 'test') { yeah.style.display = 'block'; } else { yeah.style.display = 'none'; } })

 <label for="db">Type whatever or "test" word to see button</label> <input type="text" name="amount" /> </select> <div id="yeah" style="display:none;"> <input type="submit" /> </div>