Disable or enable only the current button

Question

With a PHP for each cycle, I'm bringing articles from the database. In those articles, we have a comment section with a form. I want to check with jQuery if there is something written on the input before the comment is sent.

As the articles are being brought with a PHP cycle, I want to check only the article in which it is being written a comment, but jQuery checks all the articles and only enables or disables the first or top result being brought from the database. I want jQuery to check only on the article with a written comment.

Here's what I'm doing:

$(document).ready(function() {
  $(".comment-submit").attr("disabled", true);

  $("#group-post-comment-input").keyup(function() {
    if ($(this).val().length != 0) {
      $(".comment-submit").attr("disabled", false);
    } else {
      $(".comment-submit").attr("disabled", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

<br>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

<br>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">

  <button class="comment-submit">
        Comment
    </button>
</form>

As you can see on the snippet above, the buttons only get enabled when text is written on the first input only. I want the buttons to get enabled when text is written on their dependent input. If input 2 has text on it, enable button 2, and so on and so on.

How can I do that?

only with the older jQuery ? not in JavaScript code (ES10) ? — Mister Jojo, Apr 02 '21 at 23:23
https://stackoverflow.com/questions/41176582/enable-disable-a-button-in-pure-javascript/41176769#41176769 — Scott Marcus, Apr 02 '21 at 23:27
your HTML code is wrong because `id` attributes must be with an unique value — Mister Jojo, Apr 02 '21 at 23:31

showdev · Accepted Answer · 2021-04-03T04:15:17.373

1

Since IDs must be unique to the DOM tree, you might consider using a class instead.

$(function() {
  $(".group-post-comment-input").on('keyup', function() {
    let $button = $(this).next('.comment-submit');
    let disabled = !this.value;
    $button.prop('disabled', disabled);
  });
});

form {
  margin: 0 0 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
  <button class="comment-submit" disabled>Comment</button>
</form>

In my demonstration, I use jQuery's next() to traverse from the input on which the "keyup" event is fired to its associated button.

.next( [selector ] )
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Another method is to traverse up to the form element with closest() and back down to the button with find(). This might be useful if you expect your HTML structure to change in a way that could break the next() traversal.

let $button = $(this).closest('form').find('.comment-submit');

I also recommend using prop() instead of attr() to enable and disable inputs.

edited Apr 03 '21 at 04:15

answered Apr 02 '21 at 23:31

showdev

28,454
37
55
73

This solution is great. With !this.value, what do you mean? It is being used to change the disabled/enabled attribute, but can it be used to change other things such as the background color? If so, how? – Cesar Pc Apr 03 '21 at 03:25
Empty input values are [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). The [logical not (!)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT#using_not) returns `true` when the value is an empty string and `false` when it is not. Using [`.prop(propertyName,value)`](https://api.jquery.com/prop/#prop2), an input is `disabled` when its value is empty. The boolean value could also be used to toggle a class that applies a background color. Is that what you mean? – showdev Apr 03 '21 at 03:54
Also, I'm using `this.value` to access the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue) attribute of the input element. You could use jQuery: `$(this).val()`. See [Jquery val() vs this.value](https://stackoverflow.com/questions/12834252/jquery-val-vs-this-value-for-dropdowns) and [jQuery(#id).val() vs. getElementById(#id).value](https://stackoverflow.com/questions/7322078/jqueryid-val-vs-getelementbyidid-value). – showdev Apr 03 '21 at 04:12
If they can be used to toggle classes, how? I'm new to jQuery – Cesar Pc Apr 03 '21 at 20:42
One method is jQuery's [`toggleClass(classNames,state)`](https://api.jquery.com/toggleclass/#toggleClass-className-state), which accepts a Boolean `state` parameter that determines "whether the class should be added or removed". – showdev Apr 04 '21 at 03:26

score 0 · Answer 2 · answered Apr 02 '21 at 23:54

ID must be unique,
but you need to use a name for sending information to your PHP server

document.querySelectorAll('button.comment-submit').forEach( bt => bt.disabled = true )

document.querySelectorAll('input[name="group-post-comment-input"]').forEach( inEl => 
   inEl.oninput = e =>inEl.nextElementSibling.disabled = (inEl.value.trim().length === 0) )

<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
  <input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
  <button class="comment-submit"> Comment </button>
</form>

Disable or enable only the current button

2 Answers2