Home > database >  Django form success messages on an HTML page with multiple forms
Django form success messages on an HTML page with multiple forms

Time:09-04

I am trying to display 2 forms in my contact.html page in a Django project. Each form needs to display a success message when being successfully submitted by users. The problem is that both forms in the page show the same success message when either of them being submitted. How can I tie the success message to the submitted form on my HTML page?

forms.py

from dataclasses import field, fields
from logging import PlaceHolder
from socket import fromshare
from django import forms
from .models import ServiceRequest, Contact, Newsletter

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = ['name','email','phone','message']

class NewsletterForm(forms.ModelForm):
    class Meta:
        model = Newsletter
        fields = ['name','email']

views.py

from http.client import HTTPResponse
from multiprocessing import context
from django.shortcuts import render
from django.views.generic import TemplateView
from .forms import ContactForm, NewsletterForm, ServiceRequest, ServiceRequestForm
from django.http import HttpResponseRedirect
from django.contrib import messages
from django.urls import reverse

def Contact(request):
    contact_form = ContactForm(request.POST or None)
    newsletter_form = NewsletterForm(request.POST or None)
    if request.method == 'POST' and contact_form.is_valid():
        contact_form.save()
        messages.success(request, "Thanks for contacting us!")
        return HttpResponseRedirect(request.path_info)
    elif request.method == 'POST' and newsletter_form.is_valid():
            newsletter_form.save()
            messages.success(request, "Thanks for joining our newsletter!")
            return HttpResponseRedirect(request.path_info)
    context = {
        "contact_form":contact_form,
        "newsletter_form":newsletter_form,
    }
    return render(request, "main/contact.html", context)

contact.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block content %}
    <div>
        <!-- Message from backend -->
        {% for message in messages %}
            {% if message.tags == 'success' %}
                <div>{{message}}
                    <a href="#" type="button"></a>
                </div>
            {% endif %}
        {% endfor %}
        
        <form method="POST">
            {% csrf_token %}
            <div >
                {{ contact_form.name|as_crispy_field }}
                {{ contact_form.email|as_crispy_field }}
                {{ contact_form.phone|as_crispy_field }}
                {{ contact_form.message|as_crispy_field }}
            </div>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>

    <div>
        <!-- Message from backend -->
        {% for message in messages %}
            {% if message.tags == 'success' %}
                <div>{{message}}
                    <a href="#" type="button"></a>
                </div>
            {% endif %}
        {% endfor %}
        
        <form method="POST">
            {% csrf_token %}
            <div >
                {{ newsletter_form.name|as_crispy_field }}
                {{ newsletter_form.email|as_crispy_field }}
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
{% endblock %}

After submitting one form on this page, both forms show the success message:

enter image description here

CodePudding user response:

You can use extra_tags of messages framework Django docs:

So in view:

 messages.success(request, "Thanks for contacting us!", extra_tags='form1')

And in template:

 {% for message in messages %}
            {% if message.tags == 'success' and message.extra_tags == 'form1' %}
                <div>{{message}}
                    <a href="#" type="button"></a>
                </div>
            {% endif %}
        {% endfor %}
  • Related