How to disable the button if textarea is empty-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.