Search code examples
htmlspringjspspring-webflow

Pressing submit button on form goes to same page


I am working on a form with text fields and I am trying to submit the form. However after pressing submit it just leads straight back into the form. I've indicated in my flow.xml file to validate it and then if successful go to homepage, but clearly this isn't happening. There's no validation logic yet, it just succeeds no matter what. I also don't see any exceptions in the console so I suspect this is an html issue but I could be wrong. I am using spring web flow and jsp.

Code shown below:

applicationForm.jsp:

<form method="post" action="${flowExecutionUrl}"
    enctype="multipart/form-data" class="form">

    <input type="hidden" name="_eventId" value="submitResource">
    <input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}" />

    <div class="card-body">
        <div class="container">

            <c:if test="${not empty document.getErr('formerr')}">
                <div class="alert alert-danger alert-dismissible fade show">
                    <strong>Error!</strong> ${document.getErr('formerr')}
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                </div>
            </c:if>

            <div class="d-flex mb-5 justify-content-center">
                <div class="btn-group m-4" data-toggle="buttons">
                    <button id="option1" type="button" class="btn btn-outline-primary">foobar1</button>
                    <button id="option2" type="button" class="btn btn-outline-primary">foobar2</button>
                    <button id="option3" type="button" class="btn btn-outline-primary">foobar3</button>
                </div>
            </div>

            <%@include file="forms/application.jsp"%>
            <%@include file="forms/clientowner.jsp"%>

            <div class="row mt-4 justify-content-center">
                <div class="col-2 m-4">
                    <button type="button" class="btn btn-secondary btn-block"
                        data-toggle="modal" data-target="#approveModal"
                        onclick="unbindLeaveAlert()">Save</button>
                    <div class="modal fade" id="approveModal" 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">Are you sure
                                        you want to save this submission as a draft?</h5>
                                    <button class="close" type="button" data-dismiss="modal"
                                        aria-label="Close">
                                        <span aria-hidden="true">x</span>
                                    </button>
                                </div>
                                <div class="modal-body">Select "Save" to save as draft</div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" type="button"
                                        data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-danger" name="submitType"
                                        value="draft">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-2 m-4">
                    <button type="button" class="btn btn-success btn-block"
                        data-toggle="modal" data-target="#returnModal"
                        onclick="unbindLeaveAlert()">Submit</button>
                    <div class="modal fade" id="returnModal" 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">Are you sure
                                        you want to submit this form?</h5>
                                    <button class="close" type="button" data-dismiss="modal"
                                        aria-label="Close">
                                        <span aria-hidden="true">x</span>
                                    </button>
                                </div>
                                <div class="modal-body">Select "Submit" to submit this
                                    submission</div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" type="button"
                                        data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-danger" name="btnSubmit"
                                        value="document">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-2 m-4">
                    <button type="button" class="btn btn-danger btn-block"
                        data-toggle="modal" data-target="#cancelModal"
                        onclick="unbindLeaveAlert()">Cancel</button>
                    <div class="modal fade" id="cancelModal" 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">Are you sure
                                        you want to cancel this form?</h5>
                                    <button class="close" type="button" data-dismiss="modal"
                                        aria-label="Close">
                                        <span aria-hidden="true">x</span>
                                    </button>
                                </div>
                                <div class="modal-body">Select "Yes" to cancel this
                                    submission</div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary px-4" type="button"
                                        data-dismiss="modal">No</button>
                                    <button type="submit" class="btn btn-danger px-4"
                                        name="submitType" value="document">Yes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</form>

application.jsp

<div class="row foobar-form">
    <div class="col-4 pl-5 ml-5">
        <div class="form-group">
            <label for="foobar-id" class="col-form-label">Foobar ID</label>
        </div>
        <div class="form-group">
            <label for="foodot-id" class="col-form-label">Foodot ID</label>
        </div>
    </div>
    <div class="col">
        <div class="form-group">
            <div class="col-6">
                <input type="text" class="form-control" id="foobar-id"
                    placeholder="Enter Foobar ID..." data-toggle="tooltip"
                    title="Add information about Foobar ID here.">
            </div>
        </div>
        <div class="form-group">
            <div class="col-8">
                <input type="text" class="form-control" id="foodot-id"
                    placeholder="Enter Foodot ID..." data-toggle="tooltip"
                    title="Add information about Foodot ID here.">
            </div>
        </div>
    </div>
</div>

flow.xml:

<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/webflow
http://www.springframework.org/schema/webflow/spring-webflow.xsd">

    <var name="loginBean" class="com.jcg.examples.bean.LoginBean" />
    <var name="applicationResource" class="com.jcg.examples.bean.ApplicationResource" />

    <view-state id="displayLoginView" view="jsp/login.jsp"
        model="loginBean">
        <transition on="performLogin" to="performLoginAction" />
    </view-state>

    <action-state id="performLoginAction">
        <evaluate expression="loginService.validateUser(loginBean)" />

        <transition on="true" to="displaySuccess" />
        <transition on="false" to="displayError" />

    </action-state>

    <view-state id="displaySuccess" view="jsp/homePage.jsp"
        model="loginBean">
    </view-state>

    <view-state id="addItem" view="jsp/applicationForm.jsp"
        model="applicationResource">
        <transition on="submitResource" to="validateResource"/>
    </view-state>

    <action-state id="validateResource">
        <evaluate expression="FormValidator.validate(applicationResource)" />
        <transition on="success" to="uploadResource" />
        <transition on="error" to="displayLoginView" />
    </action-state>

    <action-state id="uploadResource">
        <evaluate expression="FormUploader.upload(applicationResource)" />
        <transition on="success" to="displaySuccess" />
        <transition on="error" to="errorPage" />
    </action-state>

    <view-state id="displayError" view="jsp/failure.jsp" />

    <global-transitions>
        <transition on="displaySuccess" to="displaySuccess" />
        <transition on="addItem" to="addItem" />
    </global-transitions>
</flow>

Solution

  • So I had to remove enctype="multipart/form-data" from my form tag and it works.