onkeyup not working when text box is empty

Question

onkeyup not working when text box is empty

3.9k views Asked by anish At 11 June 2015 at 05:18

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>

Original Q&A

There are 5 answers

JGV On 11 June 2015 at 05:23

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>

DineshkumarBalan On 11 June 2015 at 05:29

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.

stanze On 11 June 2015 at 05:30

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

Libin C Jacob On 11 June 2015 at 05:32

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

**Sekretoz** · Accepted Answer · 2015-06-11 05:31:39

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>

TechQA.

onkeyup not working when text box is empty

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in ONKEYUP

Popular Questions

Popular Tags

Trending Questions