My current project involves building an app with a registration form and a login feature to access an employees table displaying their information along with the date above the table. The databases are all set up, but I am encountering issues when trying to add or delete employees. Whenever I attempt to add a new employee or delete one by checking the checkbox, the app crashes and displays an error message saying that it cannot GET.
1. Below is the code for the registration form located in REGISTER.EJS:
<form action="/register" method="post">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="email" class="form-control" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90fef1fdf5d0f5e8f1fde0fcf5bef3fffd">[email protected]</a>">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" name="password" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© Employees App</p>
</form>
2. Here is the code for the table form located in LIST.EJS:
<div class="box" id="heading">
<h1> <%= currentDate %></h1>
</div>
<div class="box">
<% newListEmployee.forEach(function(employee){ %>
<form action="/delete" method="post">
<div class="item">
<input type="checkbox" name="deleting" value="<%= employee._id %>" onChange="this.form.submit()">
<p>Names: <b><%= employee.employeeNames %></b></p>
<p>Address: <b><%= employee.employeeAddress %></b></p>
<p>Phone number: <b><%= employee.employeePhone %></b></p>
<p>Salary: <b><%= employee.employeeSalary %></b></p>
</div>
</form>
<% }) %>
<form action="/list" method="post"gt;
<input type="text" name="Names" placeholder="Employee names:" autocomplete="off">
<input type="text" name="Address" placeholder="Address:" autocomplete="off">
<input type="text" name="Phone" placeholder="Phone number:" autocomplete="off">
<input type="text" name="Salary" placeholder="Salary:" autocomplete="off">
<button type="submit" name="button">Add</button>
</form>
</div>
3. Lastly, here is the issue in APP.JS where I make the requests:
app.get("/home", function (req, res) {
res.render("home");
});
app.get("/register", function (req, res) {
res.render("register");
});
app.get("/login", function (req, res) {
res.render("login");
});
app.post("/register", function (req, res){
const newUser = new User({
email: req.body.email,
password: req.body.password
});
newUser.save(function (err){
if (err) {
console.log(err);
} else {
let today = new Date();
let options = {
weekday: "long",
day: "numeric",
month: "long"
};
let day = today.toLocaleDateString("en-US", options);
employeeRegistration.find({}, function (err, foundEmployees) {
if (foundEmployees.length === 0) {
employeeRegistration.insertMany(defaultEmployees, function (err) {
if (err) {
console.log(err);
} else {
console.log("Successfully added new employee to DB.");
}
});
res.redirect("/list");
} else {
res.render("list", {
currentDate: day,
newListEmployee: foundEmployees
});
}
});
}
});
});
app.post("/list", function (req, res){
const employeeName = req.body.Names;
const employeeAddresses = req.body.Address;
const employeePhoneNumber = req.body.Phone;
const employeeSalary = req.body.Salary;
const employee = new employeeRegistration({
employeeNames: employeeName,
employeeAddress: employeeAddresses,
employeePhone: employeePhoneNumber,
employeeSalary: employeeSalary
});
employee.save();
res.redirect("/list");
});
app.post("/delete" ,function (req, res){
const checkedEmployeeId = req.body.deleting;
employeeRegistration.findByIdAndRemove(checkedEmployeeId, function (err){
if (!err) {
console.log("You deleted checked employee!");
res.redirect("/list");
}
});
});
In this project, I am using JavaScript, Node.js, Express.js, and EJS. There seems to be a disconnect between my POST and GET requests, causing the application to crash unexpectedly. I need to troubleshoot and fix this issue to ensure smooth functionality.