Geek Answers Handbook

Disable a button whenever a text field is dynamically empty

Here is 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 inefficient, as the user can delete the text inside the text field and press the button while holding down the DELETE key. Is there a more efficient way to achieve this with javascript?

+7
source share
5 answers

Add a check when a button is clicked to see if there is any text. If this does not happen, display a warning window (or another feedback form) to tell the user to enter data and not perform the functionality of the buttons.

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>
+8
source

The easiest way to do this is: -

Simple HTML and JavaScript: run a snippet (7 lines total)

 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 used textarea, but you can use any HTML input tags and try it! Good coding!

+4
source

You can poll the input value. It will be less efficient and less responsive, but potentially more reliable.

As you pointed out, the keyup event should not fire when the input value is reset. What if they select the text with the mouse, right-click and cut?

A change event may help, but it is still not so reliable. It only works when blurring and skips some changes (for example, choosing autocomplete).

Here's jsFiddle demonstrating the polling solution.

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

You can put it in a script tag, for example:

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

This will work, but it will mean that your custom browser will not cache JavaScript, which means that loading your page will take longer. In addition, you can clear your scripts from your content. But if you need a quick and easy option, this should be done. Put this at the bottom of your body and wrap it in a dom handler (see Bottom of the answer).

As a cleaner option, you can put it in an external file, for example. someScript.js whose contents will be your JavaScript (without script tags). You then link to this script from your HTML file:

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

Note. You need to make the script website available so that browsing at 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 first loads the actual content, and then the scripts. This will mean that your content will be shown to your users earlier.

You must make the latest JavaScript modification to jsFiddle. JsFiddle has code run by "onDomReady" (see top left of the fiddle). Technically, you don't need to do this if you have a script after your content. This is there to ensure that the script runs after loading the contents, so if the script tries to find elements in the DOM, they are loaded and found. You should probably add this to the script in the case (for some reason) you move the script to the content. To wrap your script in a dom handler in jQuery do the following:

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

In this example, the code marked where the comment //my code will be launched only when the page is ready.

+1
source 
  <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>
+1
source

Here, the button is disabled by default, and when the keyup event fires, check if the value of the text field is equal to zero or not. If zero, the button is disabled, otherwise 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>

0
source

More articles: