Как подтвердить форму в модальном окне Bootstrap + Django?

Question

[stas9878]

У меня есть некая страница с формой

{% extends 'base.html' %}
{% load static %}

{% block title %}Загадай желание{% endblock %}

{% block content %} 
<div class="container">
    <div class="content">
        
        <div class="b">
            
            <h2>Загадай своё желание и оно неприменно <br>
                <span>сбудется</span> </h2>
                
            <form method="post">
                {% csrf_token %}
                {{form.wish}}
                <br>
                <!-- Кнопка-триггер модального окна -->
                <button type="button" class="btn btn-outline-danger wishbutton" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    Загадать
                </button>
            </form> 
            <img src="{% static 'img/hr_line.png' %}" alt="">
        </div>
    </div>
      {% include 'index/model-window.html' %}
</div>
{% endblock %}

Здесь есть кнопка, которая должна вызывать модальное окно, в котором дальнейшие инструкции и ещё 2 кнопки.
Одна из них закрывает модальное окно без отправки формы, другая должна быть кнопкой, которая подтверждает отправку данных из формы.

Код модального окна:

<!-- Модальное окно -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Заголовок модального окна</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="submit" class="btn btn-primary">Понял</button>
      </div>
    </div>
  </div>
</div>

Пробовал делать {% include 'index/model-window.html' %} в самой форме, но тогда столкнулся с проблемой неактивного модального окна(оно есть, но нажать что-либо я не могу, и оно затемнено)

Как сделать так, чтобы вторая кнопка 'Понял' делала submit формы?

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Answer 1

[Сергей Ы]

Повесить на кнопку

<button type="submit" class="btn btn-primary">Понял</button>

событие onClick , дата атрибут c экземпляром формы на

<!-- Кнопка-триггер модального окна -->
                <button type="button" class="btn btn-outline-danger wishbutton" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    Загадать
                </button>

и функцию обработчик на это событие который возьмет форму из дата атрибута и сделает Node.submit() ей! Это про JS, не про Django

Comments

[stas9878]

спасибо, что дали направление для поисков) Буду искать в JS