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.

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.

• javascript
• html

• 1 Have you checked the browers console for errors? – NewToJS Commented Jan 16, 2017 at 9:24
• 2 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 Commented Jan 16, 2017 at 9:26

4 Answers 4

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

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')

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

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