How do I enable a disabled button after moderators input some text into textarea using `hx-on`?

I want to disable the "Yes" button until moderators of my Django site provide a reason for banning users. Once the reason is provided in the textarea, then the "Yes" button would be enabled.

It's a common pattern I've encountered when using React and Javascript, but since I'm using HTML and Django Templates for this project, I want to use HTMX for some interactivity. I'm still new using HTMX, so I'd appreciate some help, thanks!

I've checked the questions on here, and I didn't find any answers for my question. Or am I using hx-on:input wrong in this context?

I've also tried using hx-on:change but to no avail.

I've looked into hx-disabled-elt but I don't think that's what I want. Because I'm not submitting a request just yet, I just want some interactivity for my form.

I've also looked at this question but this requires me to communicate with the server, which I would like to minimise if I can.

This is what I have currently and I'm not sure why it's not working:

<form method="POST">
      {% csrf_token %}
      <p>Please provide the reason for the ban.</p>
      <div class="input-group">
        <textarea
          class="form-control"
          aria-label="Reason for ban"
          name="reason-for-ban"
          hx-on:input="htmx.removeClass(htmx.find(#yes-ban-this-user), 'disabled')">
        </textarea>
      </div>
      <input
        type="submit"
        class="btn btn-danger w-100 mt-3 disabled"
        value="Yes" id="yes-ban-this-user"
      />
      <a
        href="{% url "user-profile" user.username %}"
        class="btn btn-secondary w-100 mt-1"
      >
        Cancel
      </a>
</form>

here's how you can disable button in text area although in django templates htmx does not support setting attributes dynamically in the way described:


<textarea
    class="form-control"
    aria-label="Reason for ban"
    name="reason-for-ban"
    hx-on:input="
        let btn = htmx.find('#yes-ban-this-user');
        if (this.value.trim()) {
            htmx.removeClass(btn, 'disabled');
        } else {
            htmx.addClass(btn, 'disabled');
        }
    ">
</textarea>

<button id="yes-ban-this-user" class="btn btn-danger disabled">Ban User</button>
Вернуться на верх