skip to Main Content

I want to disable the submit button if the text area is empty. I have initialized the submit button to disable condition and written bellow codes. But after typing text inside text area, it not got enable condition. Below are the codes. I have tried with If…else…condition also

<form id="breakdown">
    <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
    <br>
    <input type="submit" id="btn10" value="submit" disabled>
  </form>
function disableEnableSubmitButton () {

      let textarea1 = document.getElementById("tbd").value;
      textarea1.addEventListener("input",change);
      }

      function change () {
        document.getElementById("btn10").disabled = false;
      }

2

Answers


  1. Chosen as BEST ANSWER

    I have used if...else...block also. It works fine.

    const textarea1 = document.getElementById("tbd");
          textarea1.addEventListener("input",dis)
    
    
    function dis() {
          if (textarea1.value.trim() === "") {
            document.getElementById("btn10").disabled = true;
          } else {
            document.getElementById("btn10").disabled = false;
          }
          }
     <form id="breakdown">
        <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
        <br>
        <input type="submit" id="btn10" value="submit" disabled>
      </form>


  2. The issue is that you have just created JavaScript functions and never called them anywhere. Which is why it is not changing the state of the button.

    Here is the updated script to toggle the button state:

    const textarea = document.getElementById("tbd");
    const submitButton = document.getElementById("btn10");
    
    textarea.addEventListener("input", function () {
        submitButton.disabled = textarea.value.trim() === "";
    });
    <form id="breakdown">
        <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
        <br />
        <input type="submit" id="btn10" value="submit" disabled />
    </form>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search