Как мне включить отключенную кнопку после того, как модераторы введут некоторый текст в текстовое поле, используя "hx-on`?
Я хочу отключить кнопку "Да" до тех пор, пока модераторы моего сайта Django не предоставят причину для запрета пользователей. Как только причина будет указана в textarea
, кнопка "Да" будет включена.
Это распространенный шаблон, с которым я сталкивался при использовании React и Javascript, но поскольку я использую шаблоны HTML и Django для этого проекта, я хочу использовать HTMX для некоторой интерактивности. Я все еще новичок в использовании HTML, поэтому был бы признателен за некоторую помощь, спасибо!
Я просмотрел вопросы здесь и не нашел ответов на свой вопрос. Или я неправильно использую hx-on:input
в данном контексте?
Я также пробовал использовать hx-on:change
, но безрезультатно.
Я просмотрел hx-disabled-elt
, но не думаю, что это то, что мне нужно. Поскольку я пока не отправляю запрос, мне просто нужна некоторая интерактивность в моей форме.
Я также рассмотрел этот вопрос но для этого мне необходимо взаимодействовать с сервером, что я хотел бы свести к минимуму, если смогу.
Это то, что у меня есть на данный момент, и я не уверен, почему это не работает:
<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>
вот как вы можете отключить кнопку в textarea, хотя в шаблонах django htmx не поддерживает динамическую настройку атрибутов описанным способом:
<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>