Disable input type submit when input text is empty

Question

I have this code:

setInterval(function(){
  if($("#username_error").val() == "" && $("#password_error").val() == "" && $("#email_error").val() == ""){
    $('input[type="submit"]').removeAttr('disabled');
  } else {
    $('input[type="submit"]').attr('disabled','disabled');
  }
}, 10);

I need to disable the submit button if there are no errors for three divs. When I run this code, nothing happens. But if I do an alert() this if statement runs correctly. What am I doing wrong here?

There are many events that you can listen to instead of using setOverkill. — Ram
– Ram, Commented Dec 28, 2012 at 11:11
try by id for input[type="submit"] and replace setInterval to some other custom function — Moorthy GK
– Moorthy GK, Commented Dec 28, 2012 at 11:12
there can be different way than setInterval for this kind of stuff. just a suggation — Rupesh Patel
– Rupesh Patel, Commented Dec 28, 2012 at 11:27

Arvind Bhardwaj · Accepted Answer · 2012-12-28 11:24:24Z

1

Do it like:

$('input[type="submit"]').attr('disabled','disabled');    

$('input[type="text"]').change(function(){
   if($("#username_error").val() == "" && $("#password_error").val() == "" && $("#email_error").val() == "") {
       $('input[type="submit"]').removeAttr('disabled');
   } else {
       $('input[type="submit"]').attr('disabled','disabled');
   }
});

DEMO

edited Dec 28, 2012 at 11:24

answered Dec 28, 2012 at 11:12

Arvind Bhardwaj

5,3215 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bipen Over a year ago

if error value is empty that means there is no error.... and thn you are making it disable... this makes no sense

Arvind Bhardwaj Over a year ago

@bipen I just gave him the idea of how to do it. I am not considering what these values are. It may be text field or something else.

Arvind Bhardwaj Over a year ago

@MaxPain I have added the demo, you can take a look at that.

Max Pain Over a year ago

ok I used live with hover but the button does not re-enable after there is no errors ? how do I fix this ?

Anoop · Accepted Answer · 2012-12-28 11:16:43Z

0

Use jQuery keyup event.

$('input').keyup(function(){
       if($("#username_error").val() == "" && $("#password_error").val() == "" && $("#email_error").val() == "") {
         $('input[type="submit"]').attr('disabled',true);
       } else {
         $('input[type="submit"]').attr('disabled', false);
       }
    });

answered Dec 28, 2012 at 11:16

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

Adriano Silva · Accepted Answer · 2012-12-28 11:41:42Z

0

Another solution...

$(document).ready(function () {
    $('button').attr("disabled", true); // starts disabling the button
    $('input').on("blur", null, function () {
        if ($("#username_error").val() != "" && $("#password_error").val() != "" && $("#email_error").val() != "") {
            $("#botao").attr("disabled", false);
        } else {
            $("#botao").attr("disabled", true);
        }
    });
});

answered Dec 28, 2012 at 11:41

Adriano Silva

2,5861 gold badge17 silver badges29 bronze badges

1 Comment

Adriano Silva Over a year ago

If "#username_error", "#password_error" and "#email_error" are three divs. Replace "val()" by "html()"

Collectives™ on Stack Overflow

Disable input type submit when input text is empty

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related