Не удается отправить почтовый запрос с помощью HTMX + Django

Я пытаюсь создать CRUD-страницу с помощью django + HTMX и не могу отправить POST-запрос. hx-post посылает GET запрос вместо POST запроса.

Мои ролевые модели следующие:

class Role(models.Model):
    name = models.CharField(max_length=200)

Я создаю форму с помощью Cripsy Forms следующим образом

class RoleForm(forms.ModelForm):
    class Meta:
        model = Role

      fields = ('name', )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.fields['name'].label = "Role"

        self.helper.add_input(Submit('add_new_Role', 'Add', css_class='role_button'))
        self.helper.layout = Layout(
            Row(
                Column('name'),
            )
        )

Я использую форму в своем шаблоне следующим образом :

{% extends 'main.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="row">
  <div class="card col-md-6 ml-auto mr-auto">
    <div class="card-body">
      {% crispy role_form %}
    </div>
  </div>
</div>
<div id="role_list">
  {% include 'role_list.html' %}
</div>


{% endblock %}


{% block javascript %}
<script type="text/javascript">
  $(document).ready(function(){
    $("form").removeAttr("method");
    $('.role_button').attr("hx-post", '{% url "role_add" %}');
    $('.role_button').attr('hx-target', '#role_list');

  });
</script>

{% endblock %}

Ссылка CDN добавлена в файл main.html.

Насколько я понимаю, нажатие на кнопку ADD должно вызывать POST-запрос. Однако инициируется GET запрос, что заставляет меня чувствовать, что HTMX часть не работает вообще

Я нашел решение после слишком большого количества проб и ошибок. Оказывается, Django Crispy формы создают вход с type='submit' для создания кнопки submit

однако, hx-post работает только если у вас есть кнопка с type='submit' вместо input для отправки формы

Типичный способ сделать это - добавить атрибуты hx-post и ht-target к элементу form, а не к кнопке submit. Это заставит HTMX перехватить событие submit на форме и отправить всю форму в виде AJAX-запроса.

См. документацию Triggering Requests:

По умолчанию запросы AJAX запускаются "естественным" событием элемента элемента:

  • форма срабатывает на событие submit

Как сказал @Mark в своем ответе, я бы предложил определить тег формы в вашем шаблоне и поместить htmx материал на него:

<form hx-post={% url 'submit url' %}  <!-- Do not set action and method -->
 ...other htmx attributes>
    {% crispy form %}    
</form>

и установите помощник формы в положение не отображать тег формы

self.helper.form_tag = False

И кстати, если вы настроили htmx на автоматическую отправку csrf, (Смотрите здесь для дополнительной информации) лучше отключить csrf в вашем помощнике формы также 

self.helper.disable_csrf = True  # no need, request is sent via htmx
Вернуться на верх