skip to Main Content

I created a form where users can input words in a textarea as tags and submit them as a string using JavaScript. The feature I want to add is to disable the submit button whenever the textarea is empty (does not contain any tags).

Here is what I have tried so far:

HTML

<form>
  <textarea onkeyup="success()" name="tags" id="tag-input1" required>
  </textarea>
  <p class="instruction">Press enter to add a new word</p>
  <!-- Disable Submit Button -->
  <input type="submit" id="submit" class="save" value="Submit">
</form>

JavaScript

function success() {
  if (document.getElementById("tag-input1").value === "") {
    document.getElementById('submit').disabled = true;
  } else {
    document.getElementById('submit').disabled = false;
  }
}

DEMO

2

Answers


  1. I think you could check value length.
    At first, try to add disabled attribute to your submit button in html.

     <input type="submit" id="submit" class="save" value="Submit" disabled="true">
    

    Then in here is your success function code;

        function success() {
          document.getElementById('submit').disabled = !document.getElementById("tag-input1").value.length;
        }
    
    Login or Signup to reply.
  2. As per my knowledge, that is not how disable works. Disable is a html attribute that stops user from writing data in the perticular text.
    Try providing error message when value of perticular message is empty
    You can use conditional statements for that

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search