CODEWITHSUNDEEP
javascriptjquerycss
weeJimmy
weeJimmy

Reputation: 119

How to make a div appear if text gets typed into a form input

I have a form input which, when text gets typed into it, updates a div. This is what I use:

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value);
});

That works super except I'd also like the ability to hide the div (I know how to make it start off hidden) when there's no text in the form input.

In otherwords when someone types into the form input a div will appear and the text which is being typed into the input appears in the div. If the user clears the input again then the div dissappears.

Sorry I'm new to JS :)

Upvotes: 0

Views: 316

Answers (4)

Vivin Paliath
Vivin Paliath

Reputation: 95528

Something like this should work:

$('#CampaignTitle').keyup(function() {

    var $titleBar = $('#titleBar');

    if(this.value.length == 0) {
       $titleBar.hide();
    }

    else { 

       if($titleBar.is(":hidden")) { 
          $titleBar.show();
       }

       $titleBar.text(this.value);
    }
});

It's a bit verbose and there are ways to make it a little less-verbose, but since you're still learning, I figured that this would give you a general idea of what's going on. The is(":hidden") check can be omitted; that would run show() on $titleBar even if it is already visible.

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6955

$('#CampaignTitle').keyup(function() {
    if (this.value){
        $('#titleBar').text(this.value).show();
    }
    else {
        $('#titleBar').hide();
    }
});

Upvotes: 0

Bojangles
Bojangles

Reputation: 101483

Do a test to see if the text box value's length is greater than 0:

$('#CampaignTitle').keyup(function() {
    if($(this).val().length > 0)
    {
        $('#titleBar').text($(this).val()).show();
    }
    else
    {
        $('#titleBar').hide();
    }
});

The key line here being if($(this).val().length > 0).

Upvotes: 2

David Tran
David Tran

Reputation: 10606

Try this

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value).show();
    if (this.value==''){ $('#titleBar').hide() }
});

Upvotes: 0

Related Questions