SpringMVC - Send nested form in jsp

Question

I have a form (addPassForm) which is nested in another form (addStoreFrom) in the JSP page. How can I send the addPassForm form to the controller?

When I try to send the addPassForm form, addStoreFrom form sends instead.

    <s:url value="/addStore" var="urlAddStore"/>
    <form:form id="addStoreFrom" modelAttribute="newStore" action="${urlAddStore}" method="POST">
        <table border="1">
            <tbody>
                <tr>
                    <td><form:label path="title">Title*</form:label></td>
                    <td><form:input path="title"/></td>
                </tr>
                ...

                <tr>
                    <s:url value="/addPassForm" var="addPassForm"/>
                    <form:form id="addPassForm" action="${addPassForm}" method="post">
                        ...
                        <td>
                            <input type="submit" value="Add"/>
                        </td>
                    </form:form>
                </tr>
                <tr>
                    <td><input type="submit" value="Save"/></td>
                    <td/>
                </tr>
            </tbody>
        </table>
    </form:form>

score 1 · Accepted Answer · edited May 23 '17 at 11:43

It is just because nested forms in not a valid HTML pattern. The browser simply ignore the inner <form></form> tags and sees only one form. Reference : Is it valid to have a html form inside another html form?

It is not a JSP problem (nor a Java one !), but only a incorrect HTML problem. You must use successive forms instead of nested forms (or user javascript as other suggested)

Example with successive forms :

<s:url value="/addStore" var="urlAddStore"/>
    <table border="1">
        <tbody>
            <form:form id="addStoreFrom" modelAttribute="newStore" action="${urlAddStore}" method="POST">
            <tr>
                <td><form:label path="title">Title*</form:label></td>
                <td><form:input path="title"/></td>
            </tr>
            ...

            <tr>
                <td><input type="submit" value="Save"/></td>
                <td/>
            </tr>
            </form:form>
            <tr>
                <s:url value="/addPassForm" var="addPassForm"/>
                <form:form id="addPassForm" action="${addPassForm}" method="post">
                    ...
                    <td>
                        <input type="submit" value="Add"/>
                    </td>
                </form:form>
            </tr>
        </tbody>
    </table>

Thanks for the link and detailed answer – Lancaster Dec 08 '14 at 14:16 — Lancaster, Dec 08 '14 at 14:16

score 0 · Answer 2 · answered Dec 08 '14 at 12:53

Explicitly call submit() function in javascript.Add a function and bind it to onclick of add button.<input type="button" value="Add" onclick="submitAddPassForm()"/>.In javasrcipt simply use:

function submitAddPassForm(){
   $('#addPassForm').submit();
}

score 0 · Answer 3 · answered Dec 08 '14 at 13:14

0

You can just make a ajax post call instead of a form submit

answered Dec 08 '14 at 13:14

long

59
6

SpringMVC - Send nested form in jsp

3 Answers3