What jQuery do I need to hide a div class if an input value is empty?

Question

In my options panel I have a section where the user can enter their Twitter username. Currently if the value for that field is empty, the Twitter icon disappears on my website, which is good as it means the div class has been successfully hidden. However, when I enter a username in the field, the div class still stays hidden.

This is the jQuery I have at the moment:

<script type="text/javascript">
$(document).ready(function() {
if($('mytheme_twitter:empty')){$('.twitter').hide();}   
});
</script>

I think something must be missing from it. Do I need to add another function? If so, where do I put it? I'm a bit of a jQuery noob.

Sushanth -- · Accepted Answer · 2016-11-09 01:12:05Z

4

Firstly :empty is the wrong selector for this use case.

:empty Select all elements that have no children (including text nodes

Change you logic to check if the value of the imput is empty.

if($('.mytheme_twitter').val() === '' ){$('.twitter').hide();}

You need to write up a change event to handle that case..

$('mytheme_twitter') has to be   $('#mytheme_twitter')  If ID OR $('.mytheme_twitter') If Class

//

 <script type="text/javascript">
    $(document).ready(function() {

        if($('.mytheme_twitter').val() == '' ){$('.twitter').hide();}  

        $('.mytheme_twitter').on('change' , function() {

             if( this.value != ''){

                   $('.twitter').show(); 
              }
              else{
                   $('.twitter').hide(); 
             }
        });
      });
    </script>

edited Nov 9, 2016 at 1:12

answered Oct 8, 2012 at 16:27

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

musefan Over a year ago

and if they empty the field once more?

Caleb · Accepted Answer · 2012-10-10 01:56:03Z

1

I would do something like this:

<script type="text/javascript">
    $(document).ready(function () {
        var twitter = $(".twitterTextBox").val();
        if(twitter == "") {
            $(".twitterIcon").hide();
        } else {
            $(".twitterIcon").show();
        }
    });
</script>

This only checks the input when the page loads. If you want the Twitter icon to show once they type something in the text box, then you'll have to add an event listener such as onkeyup.

Hope this helps.

edited Oct 10, 2012 at 1:56

answered Oct 8, 2012 at 16:34

Caleb

8152 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

What jQuery do I need to hide a div class if an input value is empty?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related