CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 1629

Show button if input is not empty

I am not much of a JavaScript guru, so I would need help with a simple code. I have a button that clears the value of an input field.

I would like it (the button) to be hidden if input field is empty and vice versa (visible if there is text inside the input field).

The solution can be pure JavaScript or jQuery, it doesn't matter. The simpler, the better.

Upvotes: 4

Views: 29485

Answers (5)

Ilya Karnaukhov
Ilya Karnaukhov

Reputation: 3975

if(!$('input').val()){
    $('#button').hide();
}
else {
    $('#button').show();
}

In it's simplest form ;)

Upvotes: 7

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

to do this without jQuery (essentially the same thing others already did, just pure js). It's pretty simple, but I've also added a few comments.

 <body>
    <input type="text" id="YourTextBox" value="" />
    <input type="button" id="YourButton" value="Click Me" />
    <script type="text/javascript">

        var textBox = null;
        var button = null;

        var textBox_Change = function(e) {
            // just calls the function that sets the visibility
            button_SetVisibility();
        };

        var button_SetVisibility = function() {
            // simply check if the visibility is set to 'visible' AND textbox hasn't been filled
            // if it's already visibile and the text is blank, hide it
            if((button.style.visibility === 'visible') && (textBox.value === '')) {
                button.style.visibility = 'hidden';
            } else {
                // show it otherwise
                button.style.visibility = 'visible';
            }
        };    

        var button_Click = function(e) {
            // absolutely not required, just to add more to the sample
            // this will set the textbox to empty and call the function that sets the visibility
            textBox.value = '';  
            button_SetVisibility();
        };                

        // wrap the calls inside anonymous function
        (function() {
            // define the references for the textbox and button here
            textBox = document.getElementById("YourTextBox");
            button = document.getElementById("YourButton");
            // some browsers start it off with empty, so we force it to be visible, that's why I'll be using only chrome for now on...
            if('' === button.style.visibility) { button.style.visibility = 'visible'; }
            // assign the event handlers for the change and click event
            textBox.onchange = textBox_Change;
            button.onclick = button_Click;
            // initialize calling the function to set the button visibility
            button_SetVisibility();
        })();
    </script>
</body>​

Note: I've written and tested this in IE9 and Chrome, make sure you test it in other browsers. Also, I've added this fiddle so you can see it working.

Upvotes: 2

Vivin Paliath
Vivin Paliath

Reputation: 95538

First hide the button on page load:

jQuery(document).ready(function() {
    jQuery("#myButton").hide();
});

Then attach an onChange handler, which will hide the button whenever the contents of the text-field are empty. Otherwise, it shows the button:

jQuery("#myText").change(function() {
    if(this.value.replace(/\s/g, "") === "") {
       jQuery("#myButton").hide();
    } else {
       jQuery("#myButton").show();
    }
});

You will also need to hide the button after clearing the input:

jQuery("#myButton").click(function() {
   jQuery("#myInput").val("");
   jQuery(this).hide();
});

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

$("input").keyup(function () {
   if ($(this).val()) {
      $("button").show();
   }
   else {
      $("button").hide();
   }
});
$("button").click(function () {
   $("input").val('');
   $(this).hide();
});

http://jsfiddle.net/SVxbW/

Upvotes: 8

Only Bolivian Here
Only Bolivian Here

Reputation: 36743

You can use $('selector').hide() to hide an element from view and $('selector').show() to display it again.

Even better, you can use $('selector').toggle() to have it show and hide without any custom logic.

Upvotes: 1

Related Questions