onkeyup not working when text box is empty

3.9k views Asked by At

I have a text box and a submit button beside it. The button is in disabled state. Once the user type something in the text box, it should be enabled. That is working fine. But once the user starts typing, it gets enabled. And if backspace is used to make the field empty, the button still remains in enabled state.

<html>
<body> 
  <input type="text" id="fname" onkeyup="myFunction()"> 
  <input type="button" id="a" disabled = "true" value ="click me"> 
  <script> 
    function myFunction() 
    { 
      var x = document.getElementById("fname"); 
      x.value = x.value.toUpperCase(); 
      if(x.value != " ") 
      { 
        document.getElementById('a').disabled=false; 
      } 
    } 
  </script> 
</body> 
</html>
5

There are 5 answers

0
Sekretoz On BEST ANSWER

you should put else statement on your condition that makes the button disabled if textbox is empty. try the code below.

<html>
<body>
<input type="text" id="fname" onkeyup="myFunction()">
<input type="button" id="a" disabled = "true" value ="click me">

<script>
function myFunction() {

    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    if(x.value != "")
{
   document.getElementById('a').disabled=false;
}else {
document.getElementById('a').disabled=true;
}
}
</script>
</body>
</html>
0
JGV On

You are very close. All you have to do is, check for length property and add an else statement to disable the button when there is no value in the textbox.

<html>
<body>
<input type="text" id="fname" onkeyup="myFunction()">
<input type="button" id="a" disabled = "true" value ="click me">

<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
if(x.value.length > 0)
{
   document.getElementById('a').disabled=false;
}
else
{
  document.getElementById('a').disabled=true;
}
}
</script>
</body>
</html>

0
DineshkumarBalan On

I suggest you this code in HTML

<input type="submit" id="register" value="Register" disabled="disabled" />

and make below changes in javascript

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    } else {
        $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    }
});

I think it really work well.Hope you get your desired operation. Thank you.

0
stanze On

You need to write the if else condition to work respectively, Demo, And try to avoid adding event listeners directly to the markup:)

$('#fname').keyup(function() {
  //console.log('wor');  
    if(!$(this).val() == '') {
        $('#a').prop("disabled", false);
    }
    else{
        $('#a').prop("disabled", true);
    }
})
0
Libin C Jacob On

Update your Script as shown below

   function myFunction() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
        if (x.value.length != 0) {--here is the change
            document.getElementById('a').disabled = false;
        }
        else {
            alert('Empty');
            document.getElementById('a').disabled = true;
        }
    }