What Jquery Do I Need To Hide A Div Class If An Input Value Is Empty?

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, whi

Solution 1:

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')  IfIDOR $('.mytheme_twitter') IfClass

//

<scripttype="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>

Solution 2:

I would do something like this:

<scripttype="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.