Django form keeps information after submission

Question

I have a Django form and I am trying different options to do 2 things when the form is submitted:

1. Redirect the form back without any information
2. 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 })

Answer 1

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