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?

If you put a 'debugger' in the else statement is it being hit? — AlexMA
– AlexMA, Commented Jan 8, 2013 at 14:08

Robert Koritnik · Accepted Answer · 2013-01-08 17:33:19Z

4

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.

edited Jan 8, 2013 at 17:33

answered Jan 8, 2013 at 14:11

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

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

5 Comments

epascarello Over a year ago

Or you can do it with just $('#next_btn').toggle(this.value.length), It is awesome when you read jQuery docs.

Robert Koritnik Over a year ago

@epascarello: thanks man. I edited my answer to include this example as well. I think it can't be more simplified that that.

VisioN Over a year ago

You may also use my demo in the answer :)

Robert Koritnik Over a year ago

@VisioN: Yes. I upvoted you. But you're having the same problem as others. You didn't initialize state at the very beginning. Your example has value in the textbox. but if it was empty, button would still be displayed... Just so you know. ;) Otherwise keyup is the event for the OP. Apparently.

VisioN Over a year ago

@RobertKoritnik By all means your answer was good enough from the scratch. Thx for upvote, catch one from me as well ;) Regarding the initial state, of course triggering does the job, but it's rather minor.

Zeke Nierenberg · Accepted Answer · 2013-01-08 14:31:00Z

3

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

edited Jan 8, 2013 at 14:31

answered Jan 8, 2013 at 14:08

Zeke Nierenberg

2,1961 gold badge20 silver badges30 bronze badges

5 Comments

Anthony Grist Over a year ago

You can just use this.value.length == 0 and save yourself a few function calls, by the way.

Zeke Nierenberg Over a year ago

What do you mean? like !this.value.length ?

Robert Koritnik Over a year ago

@ZekeAlexandreNierenberg: reverse statements, not condition... Check my answer and you'll see.

Zeke Nierenberg Over a year ago

OK. so you need to bind the change to #myDiv. See my update I'll write in a second.

Zeke Nierenberg Over a year ago

Also note this needs to come after the textarea exsists on the page, or it needs to be wrapped in the document ready thing you've already got going.

VisioN · Accepted Answer · 2013-01-08 14:15:39Z

1

This is how it can be done it short way.

HTML:

<div id="myDiv">
  <input value="Test" />
</div>
<button id="next_btn">Next</button>

JavaScript:

$(function() {
    $("#myDiv input").on("keyup", function() {
        $("#next_btn").toggle($.trim(this.value).length > 0);
    });
});

DEMO: http://jsfiddle.net/LYtbJ/

answered Jan 8, 2013 at 14:15

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

boz · Accepted Answer · 2013-01-08 14:08:50Z

1

Assusming that the input is directly inside myDiv, I think what you mean to do is something like:

if ($('#myDiv > input').val().length == 0) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

You are trying to check the value of an input rather than a div (which isn't possible anyway as far as I know).

Or you could simplify it some more and do !$('#myDiv > input').val() instead of $('#myDiv > input').val().length == 0.

answered Jan 8, 2013 at 14:08

boz

4,9045 gold badges45 silver badges72 bronze badges

Comments

Cerbrus · Accepted Answer · 2013-01-08 14:11:54Z

1

I think you are confusing your DIV (#myDiv) with your input button:

if( $('#myDiv').find('.my-input-class').val().length == 0 ) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

In here, I assume your input has a class 'my-input-class' and use find() to grab it. Also, I assume you have an event to listen for a user typing on your input box. Cheers.

edited Jan 8, 2013 at 14:11

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered Jan 8, 2013 at 14:11

Sam3k

9501 gold badge12 silver badges22 bronze badges

Comments

Ferry Kobus · Accepted Answer · 2013-01-08 14:16:56Z

1

did you place this piece of code within an onchange function?

$(document).ready(function() {
    $('#myDiv').change(function() {
        if(this.value.length == 0) {
            $('#next_btn').hide();
        } else {
            $('#next_btn').show();
        }
    });
});

Does this work?

edited Jan 8, 2013 at 14:16

answered Jan 8, 2013 at 14:10

Ferry Kobus

2,0492 gold badges14 silver badges18 bronze badges

2 Comments

Zeke Nierenberg Over a year ago

See comment on my answer. You can can take out use this.value.length and save some the function calls

Ferry Kobus Over a year ago

What's the id of your input?

Collectives™ on Stack Overflow

JQuery Condition If Else bug in else

6 Answers 6

Attach a change event handler to your input

Don't forget to initialize state

Super simplified solution: using `toggle` with Boolean parameter

Is change event ok?

5 Comments

5 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Attach a change event handler to your input

Don't forget to initialize state

Super simplified solution: using toggle with Boolean parameter

Is change event ok?

5 Comments

5 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Super simplified solution: using `toggle` with Boolean parameter