Модальное окно не вызывается после нажатия кнопки

Я делаю свой первый сайт, используя Django, python и bootstrap 5, я хочу, чтобы человек нажал кнопку «send» после заполнения формы, и после этого всплывало модальное окно, в котором будет написано, что «все в порядке ваша заявка создана"

<div class="row mt-5 mb-5 p-2">
  <form action="{% url 'feedback_view' %}" method="POST">
    {% csrf_token %}
    <div class="col-md-6 mb-2">
      <label for="exampleInputName" class="form-label">Ваше Имя</label>
      <input name="name" class="form-control" id="exampleInputName" aria-describedby="NameHelp">
    </div>
    <div class="col-md-6 mb-2">
      <label for="exampleInputphone" class="form-label">Ваш Телефон</label>
      <input name="phone" class="form-control" id="exampleInputphone" aria-describedby="NameHelp" placeholder="+7 (918) 000-00-00">
    </div>
    <button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send</button>
  </form>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send_btn</button>

но почему-то не работает кнопка "send", но работает кнопка "send_btn", которую я сделал для проверки проблемы. на данный момент я понял что дело в типе type="submit", потому что type="button" работает. Как я могу решить эту проблему, учитывая, что это кнопка отправки формы? это код модального окна:

{% if messages %}
  {% for message in messages %}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="reviews">{{ message }}</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
{% endif %}

это views.py

class FeedBackView(View):
    def post(self, request):
        form = FeedBackForm(request.POST)
        if form.is_valid():
            form.save()
            messages.add_message(request, settings.MY_INFO, 'now call you!')
        else:
            messages.add_message(request, settings.MY_INFO, 'something was wrong')
        return redirect("/")

Дело не только в type. Дело в том, что вы поместили кнопку вне поле видимости формы. Поместите ее внутрь <form ...> **СЮДА** </form> или сделайте так:

<input type="submit" form="test">
<form id="test">
    <input type="text" name="age">
</form>

в кнопку добавьте атрибут form=id_form а в форму добавьте атрибут id=id_form

текст в form и в id должны быть одинаковыми

Вернуться на верх