How to dynamically enable/disable a button

Question

Based on the answer here, I tried to create a similar validation function:

<html>
    <head>
        <script>
            $("#my_name_id").on("change", function() {
                if (!$("#my_name_id").val()) {
                $("#button_id").attr("disabled", "disabled");
            } else {
                $("#button_id").attr("enabled", "enabled");
            }
                });
        </script>
    </head>
    <body>
        <form action="" name="test_form" id="test_form_id" method="post">
            <input type="text" name="my_name" id="my_name_id" placeholder="Type your name"/>
            <button type="submit" id="button_id">My button</button>
        </form>
    </body>
</html>

In this example, I would like to continually check to see if the input box contains any characters. If it does, then the button should be enabled (clickable). If the input box does not contain any text, then the button should be disabled.

However, in my case the button always remains enabled. What am I doing wrong here?

Can't you just do <input name="my_name" required />?

Niet the Dark Absol
– Niet the Dark Absol

2014-05-11 17:38:15 +00:00
Commented May 11, 2014 at 17:38 — Niet the Dark Absol
– Niet the Dark Absol, Commented May 11, 2014 at 17:38

dfsq · Accepted Answer · 2014-05-11 17:49:55Z

1

You should use prop, not attr. After all your code will become simpler:

$("#my_name_id").on("change keyup", function() {
    $("#button_id").prop("disabled", !this.value);
})
.trigger('change');

Also note how you can use trigger in order to run initial check on page load automatically. I also included keyup event for this to work as you type.

Demo: http://jsfiddle.net/7nywe/

edited May 11, 2014 at 17:49

answered May 11, 2014 at 17:41

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

7 Comments

Dirty Penguin Over a year ago

Your example works if I type some text, then click outside the input box. However, I would like it so that as soon as you type something, the button becomes enabled (without having to click outside first).

Dirty Penguin Over a year ago

Cool, that worked :) Could you please update your answer to include the keyup?

Dirty Penguin Over a year ago

The jsfiddle you provided works, but when i create a .html file on my desktop and try it manually it doesn't work (the button remains enabled). Is there any additional code I need to include/enable?

dfsq Over a year ago

Make sure you execute this code when DOM is loaded. Try to wrap it into document ready closure $(function() { /* code goes here */ }). Or move the code after the form tag.

Dirty Penguin Over a year ago

When you say DOM is loaded, do you mean wrapping the entire solution in another $(function() { $("#my_name_id").... })? I did however place the <script>...</script> block after the form section, same results.

|

Yair Nevet · Accepted Answer · 2014-05-11 17:46:04Z

1

No enabled attribute in HTML for , so manipulate the disabled attribute:

<script>
$("#my_name_id").on("change", function () {
    if (!$("#my_name_id").val()) {
        $("#button_id").attr("disabled", "disabled");
    } else {
        $("#button_id").removeAttr("disabled");
    }
}).trigger('change');;
</script>

edited May 11, 2014 at 17:46

answered May 11, 2014 at 17:37

Yair Nevet

13.1k17 gold badges71 silver badges111 bronze badges

3 Comments

Dirty Penguin Over a year ago

I tried your solution, however the button is still clickable upon an initial loading of the html.

Yair Nevet Over a year ago

@DirtyPenguin Well, set it as disabled by default.

Dirty Penguin Over a year ago

If I set it as disabled by default, when I start typing in text in the input box, the button is not enabled.

Amit Joki · Accepted Answer · 2014-05-11 17:36:54Z

0

You should use prop()

$("#button_id").prop("disabled", true);  // disabled
$("#button_id").attr("disabled", false); // enabled

You should use prop when you are dealing with boolean types.

answered May 11, 2014 at 17:36

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

How to dynamically enable/disable a button

3 Answers 3

Demo: http://jsfiddle.net/7nywe/

7 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://jsfiddle.net/7nywe/

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related