CODEWITHSUNDEEP
javascripthtmlbutton
Eng.Fouad
Eng.Fouad

Reputation: 117589

Disable button whenever a text field is empty dynamically

Here's my code:

<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/>
<input type="button" value="Click to begin!" id="start_button" disabled/>

This works but still not efficient since the user can delete the text inside the text box and click the button while he's holding on DELETE key. Is there a more efficient way to achieve this using javascript?

Upvotes: 25

Views: 136596

Answers (6)

Emerald T
Emerald T

Reputation: 11

This is what worked for me. I hope it works for someone else. I needed the button disabled when the user didn't have any text or when they deleted the text.

$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == "" ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});


$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == "" ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/>
<input type="button" value="Click to begin!" id="start_button" disabled/>

Upvotes: 1

Spycho
Spycho

Reputation: 7788

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.

Upvotes: 4

abhinand
abhinand

Reputation: 574

Here button is disabled by default and when keyup event is triggered, check if text field value is length is zero or not. If zero then button is disabled, else enabled.

<head>
    <title>Testing...</title>
</head>

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

    <script type="text/javascript">


        function btnActivation(){

            if(!document.getElementById('myText').value.length){
                document.getElementById("start_button").disabled = true;            
            }else{
                document.getElementById("start_button").disabled = false;

            }           
        }   

    </script>
</body>

Upvotes: 0

Harish Kulkarni
Harish Kulkarni

Reputation: 1581

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!

Upvotes: 31

Gaurav KR
Gaurav KR

Reputation: 41

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

Upvotes: 3

yoozer8
yoozer8

Reputation: 7489

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>

Upvotes: 19

Related Questions