CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gjames
gjames

Reputation: 169

Show one div and hide another if label = empty

I've been able to effectively show a div if a label is empty (which informs the user no internet connection has been found) which is what I want.

However, I also want to hide #activateform if label is empty.

With my current set-up #activateform gets hidden when the function runs even if the label is populated which is not what I want. I tried using if statement (see bottom code block) but haven't been able to get it working.

Here is my html: 

<div class="form-group" style="display:none">
   <label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
   <h4> You don't seem to be connected to the internet </h4>
</div>

<div id="activateform"> This has to be hidden if label = empty </div>

And my script:

$(document).ready(function(){
  setTimeout(function(){
    $("div.form-group label.tbh:empty").parent().show();
    $("#activateform").hide();
  },2000);
});

And my attempt to make it only if label = empty:

$(document).ready(function(){
  setTimeout(function(){
  if $("div.form-group label.tbh").empty() {
    $("#activateform").hide();
  }
},2000);

Upvotes: 2

Views: 418

Answers (3)

Marco Mercuri
Marco Mercuri

Reputation: 1127

The empty() function delete all content from the selected elements and do not return a boolean but the selected elements after the remove of all the content. So your condition if $("div.form-group label.tbh").empty() { would never be true because the label element it's not false.

You can use the html() function, that return the content of an element and compare this value with an empty string, something like this:

$(document).ready(function(){
    setTimeout(function(){
        if ($("div.form-group label.tbh").html() == "") {
            $("#activateform").hide();
        }
},2000);

Ref:

the empty() function

the html() function

Upvotes: 0

Racil Hilan
Racil Hilan

Reputation: 25351

The empty() method is not for checking if the element is empty, it is for removing all its content (i.e. emptying it). To check if it is empty, you can use is(':empty'), similar to what you used in your first attempt.

Note: I don't know why you're delaying it by 2 seconds using setTimeout, but I kept that code.

$(document).ready(function() {
  setTimeout(function() {
    var label = $("div.form-group label.tbh");
    if ($("div.form-group label.tbh").is(':empty')) {
      label.parent().show();
      $("#activateform").hide();
    }
  }, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="display:none">
  <label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
  <h4> You don't seem to be connected to the internet </h4>
</div>
<div id="activateform"> This has to be hidden if label = empty</div>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You can use combination of .is() method and :empty selector

setTimeout(function() {
  var elem = $("div.form-group label.tbh");
  if (elem.is(':empty')) {
    elem.parent().hide();
    $("#activateform").hide();
  } else {
    elem.parent().show();
  }
  //Rest of your code
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="display:none">
  <label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
  <h4> You don't seem to be connected to the internet </h4>
</div>

Upvotes: 1

Related Questions