Show Button If Input Is Not Empty

December 15, 2022 Post a Comment

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

Solution 1:

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

In it's simplest form ;)

Solution 2:

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

http://jsfiddle.net/SVxbW/

Solution 3:

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.

Solution 4:

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();
});

Solution 5:

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.

JavaScript Creator