Disable button whenever a text field is empty dynamically

Add a check when the button is clicked to see if there is any text. If there isn't, pop up an alert box (or some other form of feedback) to tell the user to enter data, and don't do the button functionality.

Example:

<input id="myText" type="text" onkeyup="stoppedTyping()">
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript">
    function stoppedTyping(){
        if(this.value.length > 0) { 
            document.getElementById('start_button').disabled = false; 
        } else { 
            document.getElementById('start_button').disabled = true;
        }
    }
    function verify(){
        if myText is empty{
            alert "Put some text in there!"
            return
        }
        else{
            do button functionality
        }
    }
</script>

You could poll the value of the input. This would be less efficient and less responsive but potentially more reliable.

As you pointed out, the keyup event won't neccessarily fire when an input's value is cleared. What if they highlight the text with the mouse, right click and cut?

The change event might help, but it's still not all that reliable. It only fires on blur, and misses some changes (like an autocompletion selection).

Here's a jsFiddle demonstrating the polling solution.

In response to Eng.Fouad's comment, here's how to add the JS:

You could put it in a script tag, like this:

<script type="text/javascript">
    //my code
</script>

That will work, but it will mean that your user's browser won't cache the JavaScript, meaning it will take longer to load your page. It's also cleaner to separate your scripts from your content. But if you want a quick and easy option, this should do. Put this at the bottom of your body and wrap it in a dom ready handler (see the bottom part of the answer).

As a cleaner option, you can put it in an external file e.g. someScript.js, the contents of which would be your JavaScript (with no script tags). You then link to that script from your HTML file:

<html>
    <head></head>
    <body>
        <!-- contents of page -->
        <script type="text/javascript" src="/path/to/someScript.js"></script>
    </body>
</html>

NB: You need to make your script web accessible so that browsing to http://www.your-site.com/path/to/someScript.js accesses the script.

The script tag is at the bottom of the body so that the page loads the actual content first, and the scripts afterwards. This will mean that your content is visible to your users sooner.

You should make one last modification to the JavaScript in the jsFiddle. The jsFiddle has the code running "onDomReady" (see top left of the fiddle). Technically, you don't need to do this if you have your script after your content. It's there to ensure that the script runs after the content has loaded, so that if the script attempts to find elements in the DOM, they have been loaded, and are found. You should probably add this to the script in case (for some reason) you move the script to before the content. In order to wrap your script in a dom ready handler in jQuery, do this:

$(function(){
    // my code
});

In that example, code put where the //my code comment is will be run only when the page is ready.


Easiest way to do it :-

Simple Html and JavaScript : Run the snippet (Just 7 lines)

function success() {
	 if(document.getElementById("textsend").value==="") { 
            document.getElementById('button').disabled = true; 
        } else { 
            document.getElementById('button').disabled = false;
        }
    }
<textarea class="input" id="textsend" onkeyup="success()" name="demo" placeholder="Enter your Message..."></textarea>
<button type="submit" id="button" disabled>Send</button>

I have used textarea, but you can use any html input tags and try it out! Happy coding!


 <input type="number" id="abc" onkeyup="s()">
 <input type="submit" id="abc2" disabled >
<script type="text/javascript">
function s(){
var i=document.getElementById("abc");
if(i.value=="")
    {
    document.getElementById("abc2").disabled=true;
    }
else
    document.getElementById("abc2").disabled=false;}</script>

Tags:

Javascript

Html

Button

Recent Posts