How to disable a link when the textarea is empty?

Question

I'm struggling with a Web Page that contains a textarea and a link-button, made in this way:

<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>

their purpose is the following: at the click of the link a javascript file will be called ("btn-post"), which will capture the content of the textarea to be processed, but the content of the textarea shouldn't be empty and, consequently, I want the button-link to be disabled if there is not at least one character in the textarea, to avoid this situation. Some warnings: I cannot use a submit button and the link-button to be disabled must be exactly that.

Read https://www.w3schools.com/jsref/prop_textarea_value.asp — Saeed, Apr 21 '18 at 15:45
Maybe duplicate https://stackoverflow.com/questions/19806174/disable-enable-button-when-the-text-and-textarea-are-empty — Saeed, Apr 21 '18 at 15:47
Possible duplicate of [Disabling link button if textarea is empty](https://stackoverflow.com/questions/25629635/disabling-link-button-if-textarea-is-empty) — ashutoshagrawal1010, Apr 21 '18 at 15:49
@Saeed.At No, I've already checked the other posts, but they don't solve my problem, it's a different situation. — Zoythrus, Apr 21 '18 at 15:50

score 2 · Accepted Answer · answered Apr 21 '18 at 15:50

2

Here is a solution using a class and JQuery. When the textarea is empty, the link is disabled :

$(document).ready(function() {

  $("a#btn-post").addClass("disabled");

  $("textarea#comment").on("input", function() {
    if ($("textarea#comment").val())
      $("a#btn-post").removeClass("disabled");
    else
      $("a#btn-post").addClass("disabled");
  });

});

.disabled {
  pointer-events:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post </span>
</a>

answered Apr 21 '18 at 15:50

Sébastien S.

1,444
8
14

The solution is perfect, but I have only one thing to ask: Where should I put this piece of code? ".disabled { pointer-events:none }" What extension should the file be? Thank you – Zoythrus Apr 21 '18 at 15:55
`.disabled { pointer-events:none }` should be included in a `.css` file. – Sébastien S. Apr 21 '18 at 15:56
what does it mean $("textarea#comment").on("input", function() { text area on input, i never heard about it – jvk Apr 21 '18 at 16:09
"The DOM input event is fired synchronously when the value of an , element is changed." https://developer.mozilla.org/en-US/docs/Web/Events/input – Sébastien S. Apr 21 '18 at 16:11
@SébastienS. I think I cannot skip the .css, right? Or does it work anyway? – Zoythrus Apr 21 '18 at 16:32
1

You need that piece of code if you want it to work with the solution given. Including it from an external file is the best practice. Create your `example.css` file or edit an existing one which is already included in the HTML and append that piece of code in it. To include an external css file in your HTML, here is the tag and its attributes : `` – Sébastien S. Apr 21 '18 at 16:37
Ok, thanks for the clarification, now it's clear to me! I'm using jquery 3.3.1, I think it's okay anyway. – Zoythrus Apr 21 '18 at 16:42

How to disable a link when the textarea is empty?

1 Answers1