How to show popup "Success" or "Error" after I clicked the update button in which it is a modal

Question

I am working on this employee registration project and Im not exactly sure how to implement this one on django.

How could I show popupbox or like a small modal box "Success" or "Error" after I clicked the update button? It would be success if they have input all the necessary details on the modal. And error if they forgot to enter some details.

Here is the views.py

def save_employee_update(request):
print(request.POST)

emp_id = request.POST['employee_id']
fname = request.POST['first_name']
midname = request.POST['middle_name']
lname = request.POST['last_name']
pr_address = request.POST['present_address']
pm_address = request.POST['permanent_address']
zcode = request.POST['zipcode']
bday = request.POST['birthday']
email = request.POST['email_address']
pagibig = request.POST['pagibig_id']
sss = request.POST['sss_id']
tin = request.POST['tin_id']
sg_pr_id = request.POST['solo_parental_id']
# rg_sched = request.POST['reg_schedule']
usid = request.POST['userid']
defpass = request.POST['default_pass']
ustype = request.POST['user_type']
# j_title = request.POST['JobTitle']

employee = Employee.objects.get(employee_id=emp_id)

employee.first_name = fname
employee.middle_name = midname
employee.last_name = lname
employee.present_address = pr_address
employee.permanent_address = pm_address
employee.zipcode = zcode
employee.birthday = bday
employee.email_address = email
employee.pagibig_id = pagibig
employee.sss_id = sss
employee.tin_id = tin
employee.solo_parental_id = sg_pr_id
# employee.reg_schedule = rg_sched
employee.userid = usid
employee.default_pass = defpass
employee.user_type = ustype
# employee.JobTitle = j_title

employee.save()

return render(request, 'index.html')

Here is the modal

<!-- Modal -->
<div class="modal fade" id="employee.employee_id_{{ employee.employee_id }}" tabindex="-1" role="dialog" style="display: none; overflow: auto;"  aria-hidden="true" data-backdrop="static">

    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="card">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times</span>
                    </button>
                </div>
            <form class="form" id="save_employee_update" name="save_employee_update" method="post" action="/save_employee_update">
                {% csrf_token %}
                <div class="modal-body" style="overflow: auto">
                    <input type="text" class="form-control" name="employee_id" value="{{employee.employee_id}}" hidden>
                    <!----pic---->
                    <div class="text-center">
                        <a href="/">
                            <img src="{% static 'img/faces/marc.jpg' %}"  id="employee_profile_pic" class="avatar" style="border-radius: 50% " alt="..." height="200" width="200" align="top-left"><br><br>
                            <small><input type="file" name="ppFile"  ></small>
                        </a>
                    </div>
                    <br><br>
                    <label style="align: left " class="bmd-label-floating" id="personal_details"><b>Personal Details</b></label>
                    <br><br>
                    <!------pic_end---->
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="form-row">
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group bmd-form-group is-focused">
                                            <label class="bmd-label-floating" >First Name</label>
                                            <input type="text" class="form-control"  required id="first_name" name="first_name" value="{{employee.first_name }}" >
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group bmd-form-group is-focused">
                                            <label class="bmd-label-floating" >Middle Name</label>
                                            <input type="text" class="form-control"  required id="middle_name" name="middle_name" value="{{employee.middle_name }}" >
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <div class="form-group bmd-form-group is-focused">
                                            <label class="bmd-label-floating" >Last Name</label>
                                            <input type="text" class="form-control"  name="last_name" value="{{employee.last_name }}" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button id="employee_update_btn" type="submit" class="btn btn-success btn-round ">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
   </div>

Answer 1

You can use Djangos built in "Messages Framework". So if you backend logic determines it is a successful update you can do something like

from django.contrib import messages

messages.success(request, "Your password was updated successfully!")

And in template:

{% if messages %}
 <ul class="messages">
 {% for message in messages %}
  <li class="{{ message.tags }}">{{ message }}</li>
 {% endfor %}
  </ul> {% endif %}`