JQuery Condition If Else bug in else

Question

I am trying to hide a next button div until the input in it is populated so I've added this code:

<script>
    $(document).ready(function () {
        if ($('#myDiv').val().length == 0) {
            $('#next_btn').hide();  
        } else {    
            $('#next_btn').show();      
        }
    });
</script>

Here is myDiv

<textarea id="myDiv"></textarea>

If hiding the next button div but when I populate the input in #myDiv the #next_btn is not showing up.

Am I doing something wrong here?

Answer 1

Attach a change event handler to your input

You're only initially hiding your next element. You should also recheck on every change to your input value. Try this instead:

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        this.value.length && $('#next_btn').show() || $('#next_btn').hide();
    }).change(); // set initial state
});

I haven't used if statement since you're doing simple one sentence stuff in each case. I've rather replaced it with a boolean expression. Boolean execution of the Javascript engine will ensure that only one jQuery selector will be executed, so there's also no need to cache next button element.

You can of course replace that one-liner with an if like so:

if (this.value.length)
{
    $('#next_btn').show();
}
else
{
    $('#next_btn').hide();
}

Don't forget to initialize state

Attaching a change event isn't everything. You need to set initial state as well when the page loads (or is being ready). My code does that by the last call to .change(). This means that it first registers the handler and then invokes it as well.

Super simplified solution: using toggle with Boolean parameter

The whole thing can be replaced by this:

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        $('#next_btn').toggle(!!this.value.length);
    }).change(); // set initial state
});

Is change event ok?

It may not be that change event satisfies your requirements, because it fires after field looses focus. Maybe you should be using keypress or keyup events instead. But solution stays as is. Just replace event handler binding.

Answer 2

I'm assuming #myDiv is an input tag? Or there's an input inside the div? Try this:

 var textarea = $("#myDiv");
 textarea.change(function(){
      if(this.value.length == 0)
           textarea.hide();
      else
           textarea.show();
 });

That will run the if when the input changes. Its important to rerun the code every time you have a change because the length is changing!

(note, it might be smart to give myDiv a better name because its not really a div but a textarea.)

update to remove extra jquery selections