'How to disable the button if textarea is empty

I'm new to the Javascript and web developing world and I'm facing this problem, I don't know how to disable the Button if the text area is empty I would really Appreciate any help anyone has any ideas or solutions to how I get this done please tell me what to do.

document.getElementById("button").addEventListener("click", function (e){
  e.preventDefault()

  let message = document.getElementById("lname").value

  let para = document.createElement("p")
  para.innerText = message
  if (lastWasLeft){
    para.classList.add("right")
  } else {
    para.classList.add("left")
  }

  lastWasLeft = !lastWasLeft


  document.getElementById("box").appendChild(para)

  document.getElementById("lname").value = ""

  document.getElementById("lname").focus()



})




let lastWasLeft = true
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Chat</title>

  <link rel="stylesheet" href="css/main.css">

</head>

<body>

<div id="box"></div>

  <form id="form">
    <label id="label" for="lname">Message</label><br>
    <textarea id="lname" name="lname" autocomplete="off" cols="100" rows="10" placeholder="Your Message.." ></textarea><br><br>
    <button id="button" type="text">Send</button>
  </form>



<!-- Add your site or application content here -->


<script src="js/main.js"></script>


</body>

</html>
javascripthtmlcss


Solution 1:[1]

You can simply do this:

function setButtonDisabledState() {
  const lname = document.getElementById("lname");
  const btn = document.getElementById("button");  
  
  btn.disabled = lname.value === "";
}

lname.addEventListener("input", () => {
  setButtonDisabledState();
});

setButtonDisabledState();

You are adding a listener for any change on your lname textarea (oninput event) and then setting the button state accordingly. You can see an additional call at the bottom just to set the initial disabled state

Solution 2:[2]

You can set the button to be initialized as disabled first, because the textarea content is empty at first.

e.g.

<button id="button" type="text">Send</button>

replace with

<button id="button" type="text" disabled>Send</button>

Then because you process the button state based on whether the textarea content has a value, it should be listening to the textarea state.

e.g.

textarea.addEventListener('input', () => { ... });

You can refer to my complete example below.

const btn = document.getElementById("button");
const textarea = document.getElementById("lname");
textarea.addEventListener('input', () => {
  btn.disabled = textarea.value == '';
});
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Chat</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div id="box"></div>
  <form id="form">
    <label id="label" for="lname">Message</label><br>
    <textarea id="lname" name="lname" autocomplete="off" cols="100" rows="5" placeholder="Your Message.."></textarea><br><br>
    <button id="button" type="text" disabled>Send</button>
  </form>
</body>

</html>

Solution 3:[3]

Try this:

const textArea = document.getElementById("lname");
const button = document.getElementById("button");
button.setAttribute("disabled", "");
textArea.oninput = function() {
  //use textArea.value.trim().length if u want to disable the button if the value is blank or full of spaces
  if(textArea.value.length == 0) button.setAttribute("disabled", "");
  else button.removeAttribute("disabled");
}

Explanation

The button will be disabled after the script load because the value length of textarea is zero. To enable the button, you need to enter atleast 1 character.

Use textArea.value.trim().length if u want to disable the button if the value is blank or full of spaces.

Solution 4:[4]

<form id="form">
    <label id="label" for="lname">Please type at least 5 characters</label><br />
    <textarea id="lname" name="lname" autocomplete="off" cols="100" rows="10" placeholder="Your Message.."></textarea><br /><br />
    <p id="status">Please type 5 more characters</p>
    <button id="button" type="text" disabled>Send</button>
</form>

<script>
    const input = document.querySelector('#lname');
    const button = document.querySelector('button');
    const status = document.querySelector('#status');

    input.addEventListener('keyup', () => {
        if (input.value.length >= 5) {
            status.textContent = `You can send now`;
            return (button.disabled = false);
        }
        status.textContent = `Please type ${5 - input.value.length} more characters.`;
        button.disabled = true;
    });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 anros
Solution 2 Ian
Solution 3
Solution 4 mstephen19

Related Questions