Bootstrap Modal Won't Open After Form Submit

Question

I'm simply trying to open a modal after a user submits a form that will contain either a "Success" message, or an error message. No matter what I try this modal will not open. Here's the code:

<div class="container-fluid" align="center">

    <c:catch var="exception">${messages}</c:catch>
    <c:if test="${not empty exception}">
        <div style="text-align: left; color: orange">
            <c:forEach var="msg" items="${messages}">
      MESSAGE: ${msg}<br />
            </c:forEach>
        </div>
    </c:if>




    <div>

        <form action="/save">
            <table class="viewtable">
                <tbody>
                    <tr>
                        <td class="labelfield">lab_id:</td>
                        <td>${lab.lab_id}<input name="lab_id" type="hidden"
                            value="${lab.lab_id}" /></td>
                    </tr>
                    <tr>
                        <td class="labelfield">display_name:</td>
                        <td><input name="display_name" type="text"
                            value="${lab.displayName}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">lab_type_id:</td>
                        <td><input name="lab_type_id" type="text"
                            value="${lab.lab_type_id}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">aventail_profile:</td>
                        <td><input name="profile" type="text"
                            value="${lab.profile}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">status:</td>
                        <td><input name="status" type="text" value="${lab.status}"></input></td>
                    </tr>
                    <tr>
                        <td class="labelfield">notes:</td>
                        <td><input name="notes" type="text" value="${lab.notes}"></input></td>
                    </tr>
                </tbody>

            </table>


            <button type="submit" id="formSubmit" class="btn btn-primary" data-toggle="modal" data-target="#editLabModal" >Save Changes</button>
        </form>

        <div class="modal fade" id="editLabModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <c:catch var="exception">${messages}</c:catch>
                        <c:if test="${not empty exception}">
                            <div style="text-align: left; color: orange">
                                <c:forEach var="msg" items="${messages}">
                                MESSAGE: ${msg}<br />
                                </c:forEach>
                            </div>
                        </c:if>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="close" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

If anyone has any suggestions it would be greatly appreciated!

Answer 1

You can't open a modal after a full page post, you will need to submit your form via Ajax and after the response show something

an example here jQuery AJAX submit form