I have a Django form and I am trying different options to do 2 things when the form is submitted:
- Redirect the form back without any information
- Trigger a Modal after a Django Form is submitted.
I have followed this answer but it did not work the form was successfully submitted but the modal did not appear.
I have added the context of successful_submit
in the views so that it can be triggered after submitting the form
Here is part of the HTML Template:
<div class="text-center"> <button class="btn btn-primary mt-5" onclick="stepper1.previous()" > Previous </button> <button type="submit" class="btn btn-success mt-5"> Submit </button> <button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal" > Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> Modal title </h5> <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" > Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div>
here is the javascript part to show it when it is successfully submitted
{% if successful_submit %} <script type="text/javascript"> $(document).ready(function(){ $("#exampleModal").modal('show'); }); </script> {% endif %}
here is the views.py
def add__plan(request): if request.method == 'POST': # create a form instance and populate it with data from the request: form = infoForm(request.POST) # check whether it's valid: if form.is_valid(): form.save() _name = form.cleaned_data.get('Name') messages.success(request, f'PDF created for {_name}!') # return redirect('plan:plan') # redirect(reverse('plan:plan', kwargs={'successful_submit': True})) return render(request, 'plan/plan.html', {'form': form, 'successful_submit': True}) # if a GET (or any other method) we'll create a blank form else: form = infoForm() print(form.errors) return render(request, 'plan/plan.html', {'form': form, 'successful_submit': True })
Advertisement
Answer
On triggering the modal:
At the last line of add__plan(request)
, you are passing successful_submit
as True
which should make the modal load when you first load the page (before form submission) i.e. the modal should be shown without submitting the form.
successful_submit
should be False
initially.
def add__plan(request): if request.method == 'POST': # code if form.is_valid(): # code return render(request, 'plan/plan.html', {'form': form, 'successful_submit': True}) else: # code return render(request, 'plan/plan.html', {'form': form, 'successful_submit': False })
Let’s say that you have successful_submit=True
as per the code you have provided. Then, the modal should pop up when you load the page. If modal is not showing:
- check browser console for any errors
- check if JQuery and Bootstrap are loaded in the correct order