Trigger bootstrap modal after django form submission

Question

How can I trigger the bootstrap modal to popup after my django form was submitted?

In my index.html template I have a standard looking modal like this

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

below in the same index.html I have a django form

  {{ form.non_field_errors }}
                {% csrf_token %}
                    <ul id="robul">
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="name" name="{{ form.name.name }}" class="form-control">{{ form.name }}</li>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="email" class="form-control">{{ form.email }}</li>
                      </div>
                    </div>
                      <div class="form-group">
                        <div class="col-xs-6">
                        <li id="contactmessage" class="form-control">{{ form.contactmessage }}</li>
                      </div>
                    </div>
                    </ul>

in my view.py it looks like this:

if request.method == 'POST':
        form = forms.FormName(request.POST)

        if form.is_valid():
            contact_name = request.POST.get(
                'name', '')
            contact_email = request.POST.get(
                'email', '')
            form_content = request.POST.get('contactmessage', '')

            template = get_template('contact_template.txt')
            context = {'name': contact_name,
            'email': contact_email,
            'contactmessage': form_content,}
            content = template.render(context)
            mail = EmailMessage("New contact form submission", content, "Some Name" +'', ['[email protected]'],
            headers = {'Reply-To': "[email protected]" })
            mail.send()
    return render(request, 'index.html', {'form': form})

Answer 1

The modal and JS code to trigger it live in a different context than your Django form submission code. Rendering 'index.html' is basically starting fresh when you're returning from your form submission, so it essentially amounts to showing the modal on page load. But, maybe you only want to show it after a successful submit. What you'll have to do is have some JS code to show the modal on page load, and have something in your template rendering context to conditionally render that. Here's what I'm thinking:

In index.html:

{% if successful_submit %}
    <script type="text/javascript">
        $(document).ready(function(){
            $("#exampleModal").modal('show');
        });
    </script>
{% endif %}

In your view function, add the successful_submit context variable to your return:

return render(request, 'index.html', {'form': form, 'successful_submit': True})

Now, that <script> tag will only be rendered if successful_submit is True, which will only be set after a successful form POST.