Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Form just refreshes page on submit and does not go to routes

I have been struggling with this for so long and can’t figure out what the problem is. I want to just POST to /accountRoutes/editFinalMark and I have included the code for the route as well as the controller.

<form method="post" action="/accountRoutes/editFinalMark">
  <fieldset class="form-group">
    <div class="row justify-content-md-center">
      <div class="form-group" >
        <input type="" id="moduleID" name="moduleID" style="display: none;" value="<%= module._id %>">
        <input type="" name="editFinalMarkInput" id="editFinalMarkInput" class="urlInput" placeholder="Add Final Mark" style="">
      </div>
      <div class="form-group">
        <input type="submit" name="editFinalMarkButton" id="editFinalMarkButton" class="submit-docs" value="Add" style="background-color: #6dabe4; border-top-right-radius: 15px; border-bottom-right-radius: 15px; color: white;" />
      </div>
    </div>
  </fieldset>
</form>
// The Route:
router.post('/editFinalMark', accountController.editFinalMark_post);
// The Controller I want to call:
module.exports.editFinalMark_post = async (req, res) => {
    try {
        const { editFinalMarkInput, moduleID }  = req.body;

        console.log("\n\n\n\n\n");
        console.log("editFinalMarkInput: ", editFinalMarkInput);
        console.log("moduleID: ", moduleID);

        Module.findOneAndUpdate(
               { _id: moduleID }, 
               { $push: { final_mark: editFinalMarkInput } },
                 function (error, success) {
                        if (error) {
                            console.log(error);
                        } else {
                            console.log(success);
                        }
                }
        );



        res.status(201).json({  });


    } catch (err) {
        res.status(400).json({ err })
    }
};

All that happens when I click submit is that the page reloads and the url updates to include the data from the form, but it doesn’t complete the action specified in the form. There are also no errors at all in the console.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

All that happens when I click submit is that the page reloads and the url updates to include the data from the form, but it doesn’t complete the action specified in the form.

So it ignores both the action (because it goes to the wrong URL) and the method (because it puts the data in the URL so it is making a GET request).

From this we can infer that you have another <form> element and that is the one being submitted. You just haven’t included it in the code in the question.

<form> elements aren’t allowed to be nested so a validator would help you find it.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading