0

I struggle with an issue, i have nested submit in each other, and the outer submit button doesn't work. there is my code:

    <div class="container">
    <form method="POST" action="/types">

        <div>
            <ul>
                <% data.movementNames.forEach(function(movnames) { %>
                    <li>
                        <input id="movnames" type="text" name="movname" value=<%=movnames.movementName%> />
                        <form style="display: inline" class="pull-right" action="/types/movementname/<%=movnames._id%>?_method=DELETE" method="POST">
                            <button class="btn btn-xs btn-danger">DELETE</button>
                        </form>
                    </li>
                    <% }); %>
            </ul>

            <div id="newMovementNamePlaceholder">
            </div>

            <a type='button' onclick="addnewMovementName()" id="newMovementNameButton">Add Round</a>
        </div>
        <div>

            <ul>
                <% data.wodtypes.forEach(function(wodytype) { %>
                    <li>
                        <input id="wodytype" type="text" name="wodytype" value=<%=wodytype.wodType%> />
                        <form style="display: inline" class="pull-right" action="/types/wodtype/<%=wodytype._id%>?_method=DELETE" method="POST">
                            <button class="btn btn-xs btn-danger">DELETE</button>
                        </form>
                    </li>
                    <% }); %>
            </ul>

            <div id="newWodTypePlaceholder">
            </div>

            <a type='button' onclick="addnewWodType()" id="newWodTypeButton">Add Round</a>

        </div>
        <div>

            <ul>
                <% data.workoutType.forEach(function(workouttype) { %>
                    <li>
                        <input id="workouttype" type="text" name="workouttype" value=<%=workouttype.workoutType%> />
                        <form style="display: inline" class="pull-right" action="/types/workouttype/<%=workouttype._id%>?_method=DELETE" method="POST">
                            <button class="btn btn-xs btn-danger">DELETE</button>
                        </form>
                    </li>
                    <% }); %>
            </ul>

            <div id="newWorkoutTypePlaceholder">
            </div>

            <a type='button' onclick="addnewWorkoutType() ">Add Round</a>
        </div>

        <input type="submit" value="Submit" />
    </form>
</div>

and the method which should be triggered after the button click looks like this(it is just for test purpose ):

typesRoute.post("/types", async (req: any, res: any) => {
await console.log("req.body");
await console.log(req.body);
await console.log("req.params");
await console.log(req.params);
renderIndexPage(res);
});

I use ExpressJS and TypeScript for this. but I think it is pure HTML problem. You can find the full code there: https://github.com/BenceUszkai/crossfitnote/tree/typesRoute Have you got any suggestion to fix my broken code? ( I know it is a trivial question )

0 Answers0