Multiple Forms to same location in nodejs - node.js

Question

I broke my form and am trying to make two different pages and finally PUT data to same initial route(ACTION), but I see data from the second page
only:
This is the first part of the form which I broke into the first page, keeping the action same:
<div class="container">
<div class="row">
<h1 style="text-align: center">Register Yourself</h1>
<div style="width: 30%; margin: 25px auto;">
<form action="/students" method="POST">
<label>Name:</label> <div class="form-group">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
</form>
Proceed!
</div>
</div>
</div>
This is the second part of the form which I put in the second page:
<div class="container">
<div class="row">
<h1 style="text-align: center">Register Yourself</h1>
<div style="width: 30%; margin: 25px auto;">
<form action="/students" method="POST">
<label for="preference">Choose a catagory:</label>
<select name="preference" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Any">Any</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-sm btn-primary ">Submit!</button>
</div>
</form>
</div>
</div>
</div>
This is the route where we are taking data from form and adding to the db and posting finally:
router.post("/students",middleware.isLoggedIn, function(req, res){
// get data from form and add to students array
var name = req.body.name;
var preference = req.body.preference;
var author = {
id: req.user._id,
username: req.user.username
}
var newstudent = {name: name,preference: preference}
// Create a new student and save to DB
Student.create(newstudent, function(err, newlyCreated){
if(err){
console.log(err);
} else {
//redirect back to students page
console.log(newlyCreated);
res.redirect("/students");
}
});
});

Answer 1

I think you can follow this approach, however, if you have really big form. I advise you to create Modals for every step. Also, recommend you to create separate controller for forms. This is how you can achieve for the above form:
// I am assuming that you will show first form and then second form as there is no validation added
var formData = {name: name,preference: preference}; // when you have big forms create model for it
//step will make your route dynamic
router.post("/students/:step",middleware.isLoggedIn, function(req, res){
// get data from form and add to students array
if (req.params.step == 1) {
formData.name = req.body.name;
return '' //do nothing as you should submit form in next step
}
else {
formData.preference = req.body.preference;
Student.create(formData, function(err, newlyCreated){
if(err){
console.log(err);
} else {
//redirect back to students page
console.log(newlyCreated);
// res.redirect("/students"); // you don't need to redirect
formData = {name:'' ,preference: ''};
res.status(201).send({message: 'New User Created'});
}
});
}
});
In your HTML code:
<div class="container">
<div class="row">
<h1 style="text-align: center">Register Yourself</h1>
<div style="width: 30%; margin: 25px auto;">
<form action="/students/1" method="POST"> //add id for every step
<label for="preference">Choose a catagory:</label>
<select name="preference" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Any">Any</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-sm btn-primary ">Submit!</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1 style="text-align: center">Register Yourself</h1>
<div style="width: 30%; margin: 25px auto;">
<form action="/students/2" method="POST"> //add id for every step
<label for="preference">Choose a catagory:</label>
<select name="preference" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Any">Any</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-sm btn-primary ">Submit!</button>
</div>
</form>
</div>
</div>
</div>
At this moment, I can think of this approach.