Как сделать модальное окно после отправки формы?

Question

[stas9878]

Есть форма, в ней поле и кнопка 'submit'
Нужно при нажатии кнопки submit отправить данные в базу данных и оставаясь на этой странице вывести модальное окно, где будет какая-то информация...
Вся логика обработки формы уже прописана на django и работает

Форма

{% 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 id="form1" method="post">
                {% csrf_token %}
                {{form.wish}}
                <br>
                <!-- Кнопка-триггер модального окна -->
                <button type="submit" 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 %}

Модальное окно

<!-- Модальное окно -->
<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  id="wish" type="submit" class="btn btn-primary">Понял</button>
      </div>
    </div>
  </div>
</div>

Answer 1

[Saip]

Сделай это через ajax. После успешной обработки формы, выведешь модальное окно

Comments

[stas9878]

а есть какой-то пример?
2-й день уже ищу

[VoidVolker]

stas9878 https://learn.javascript.ru/ajax-intro

[Saip]

stas9878,
Можно через jQuery

$(document).ready(function () {
    $('#your_form').submit(function () {
        $.ajax({
            data: $(this).serialize(), //передаем данные из формы
            type: $(this).attr('method'),  //метод GET или POST
            url: 'ваш_адрес_на_функцию' или 
                   $(this).attr('action'),
            success: function (response) {
                //ваш код, который надо выполнить в случае успешной проверенной формы и выполнение функции
                //Например:
                $('#your_modal').addClass('active');
            },
            error: function (response) {
                console.log('error');
            }
        });
       return false;
    });
});

//views.py

def your_view(request)
     if request.method == 'POST':
         form = YourForm()
         if form.is_valid():
              #ваш код
             return JsonResponse({'status': 200}) #обязательно передать какой нибудь параметр
       else:
             return HttpResponseRedirect(request.META['HTTP_REFERER'])#редирект на эту же страницу

Можно ещё написать на fetch если важна максимальная производительность

[stas9878]

Сайпи Курбанов, спасибо!
Получилось сделать вот так

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

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

{% block content %} 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="container">
    <div class="content">
        <div class="b">
            
            <h2>Загадай своё желание и оно неприменно <br>
                <span>сбудется</span> </h2>
                
            <form id="form1" method="post">
                {% csrf_token %}
                {{form.wish}}
                
                <br>
                <!-- Кнопка-триггер модального окна -->
                
                <button  disabled id='sub' type="submit" class="btn btn-outline-danger wishbutton" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    Загадать
                </button>
                <script src="{% static 'js/button-func.js' %}"></script>
            </form> 
            <img src="{% static 'img/hr_line.png' %}" alt="">
        </div>
    </div>
    {% include 'index/model-window.html' %}
</div>
<script>
    $(document).ready(function () {
    $("#form1").submit(function () {
        $.ajax({
            data: $(this).serialize(), //передаем данные из формы
            type: "POST",  //метод GET или POST
            url: "{% url 'add-wish' %}",
            success: function (response) {
                console.log('das')
                
                //ваш код, который надо выполнить в случае успешной проверенной формы и выполнение функции
                $('form[id=form1]').trigger('reset');
                $("#staticBackdrop").show();
            },
            error: function (response) {
                console.log("error");
            }
        });
       return false;
    });
})
</script>
{% endblock %}