Javascript - enabling button when input is filled

Question

I want to enable my button, when input is filled. I want to do it in pure Javascript.

My code example in HTML:

<form action="sent.php" method="post" name="frm">
  <input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
  <button type="submit" class="button button-dark" id="send">Send message</button>
</form>

And Javascript:

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('send').disabled = "true";
    function myFunction() {
        var nameInput = document.getElementById('name').value;
        if (!nameInput === "") {
            document.getElementById('send').disabled = "false";
        } 
    }
});

I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working. Please help.

Don’t mix different approaches to event handling like this (addEventListener vs onkeyup attribute.) Most likely, you should see an error message in console saying that there is no function myFunction - because of how you nested that function into the DOMContentLoaded event, but reference it in the HTML code directly. Use addEventListener to bind the keyup event listener as well - from inside the DOMContentLoaded handler. — C3roe
– C3roe, Commented Jan 16, 2017 at 9:26

sandrooco · Accepted Answer · 2017-01-18 19:37:16Z

7

The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.

Complete refactored code answer:

HTML

<form action="sent.php" method="post" name="frm">
    <input type="text" name="name_input" id="name">
    <br>
    <button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>

JS

document.getElementById("name").addEventListener("keyup", function() {
    var nameInput = document.getElementById('name').value;
    if (nameInput != "") {
        document.getElementById('send').removeAttribute("disabled");
    } else {
        document.getElementById('send').setAttribute("disabled", null);
    }
});

edited Jan 18, 2017 at 19:37

answered Jan 16, 2017 at 9:32

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

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

Comments

Ovidiu Dolha · Accepted Answer · 2017-01-16 09:24:52Z

7

An input element in HTML is enabled only when the disabled attribute is not present.

In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)

So you need to remove it altogether:

 document.getElementById('send').removeAttribute('disabled')

answered Jan 16, 2017 at 9:24

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Comments

Dani · Accepted Answer · 2017-01-16 09:53:41Z

0

Try this one it will work for you

 function myFunction() {
            document.getElementById('send').disabled = true;
            var nameInput = document.getElementById('name').value;
            if (nameInput != "") {
            alert("Empty");
                document.getElementById('send').disabled = false;
            }
    }

if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false

edited Jan 16, 2017 at 9:53

answered Jan 16, 2017 at 9:42

Dani

9257 silver badges14 bronze badges

3 Comments

sandrooco Over a year ago

OP doesn't use jQuery. Mixing jQuery and vanilla-js isn't good practics btw.

Dani Over a year ago

ok then remove the $( document ).ready(function() { myFunction(); }); part

Dani Over a year ago

also add disabled attribute to ur button so that initially button not clickable

Sanjay Nishad · Accepted Answer · 2017-01-16 12:23:25Z

0

Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"

so just keep the same outside of DOMContentLoaded event

see working demo

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('send').disabled = "true";
});
function myFunction() {
    var nameInput = document.getElementById('name').value;
    console.log(nameInput);
    if (nameInput === "") {
        document.getElementById('send').disabled = true;
    } else {
        document.getElementById('send').disabled = false;
    }
}

answered Jan 16, 2017 at 12:23

Sanjay Nishad

1,62515 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript - enabling button when input is filled

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related