Сообщение об успешном завершении исчезнет через несколько секунд после отправки формы django и отобразит пустую форму - PullRequest
2 голосов
/ 11 апреля 2020

У меня есть форма Django, в которой человеку необходимо добавить свои данные для подписки, и я хочу, чтобы на странице отображалось сообщение об успешной отправке под кнопкой отправки в течение нескольких секунд (скажем, 3), а затем оно должно исчезнуть, а форма поля должны быть пустыми.

Определение функции в views.py выглядит следующим образом:

def new_customer(request):
    if request.method == "POST":
        form = customer_form(request.POST)

        if form.is_valid():
            form.save() 
            messages.add_message(request, message_constants.SUCCESS, '✔️ SUCCESSFUL SUBSCRIPTION')

            return HttpResponseRedirect('http://127.0.0.1:8000/subscribe/')

    else:
        form = customer_form()
    return render(request,"new_customer.html",{'form':form})

Шаблон Django:


{% load static %}
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Subscribe</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link href="{% static "nav.css" %}" rel="stylesheet">
    <link href="{% static "form.css" %}" rel="stylesheet">

</head>
{% include "navbar.html" %}
<body>

<form method="POST" class="post-form" enctype="multipart/form-data">{% csrf_token %}  
        {{ form.as_p }}  
        <button type="submit" class="btn">Subscribe</button>  
        {% if messages %}
        <ul id ="successMessage" class="messages">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}"{% endif %} style="color:green; font-size: 20px; list-style-type: none;">{{ message }}</li>
            {% endfor %}
        </ul>


        {% endif %}
</form>  

</body>  
</html>  

Текущий код помогает отображать сообщение для успешной отправки, а также пустые поля формы, но не заставляет его исчезнуть. Может ли кто-нибудь помочь?

1 Ответ

1 голос
/ 11 апреля 2020

Я предлагаю вам использовать jQuery, чтобы сообщения исчезли и сделать форму пустой,

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script text="javascript">
    setTimeout(fade_out, 3000);
    function fade_out() {
        $(".messages").fadeOut().empty();
    }
    $(".post-form")[0].reset(); // this is to reset the form 
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...