Recently, I started working with Express and Bootstrap. While attempting to create a login form that triggers a POST request to the server, I encountered an issue where the page displays "The page isn't working" instead of loading a new HTML page.
Here is the structure of my HTML form:
<section class="h-100">
<div class="container h-100" style="margin-top: 50px; ">
<div class="row justify-content-md-center h-100" >
<div class="card-wrapper">
<div class="card fat">
<div class="card-body">
<h3 class="card-title">Login</h3>
<form method="POST" class="my-login-validation" novalidate="">
<div class="form-group">
<label for="email">E-Mail Address</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus>
<div class="invalid-feedback">
Email is invalid
</div>
</div>
<div class="form-group">
<label for="password">Password
</a>
</label>
<a href="forgot.html" style="float: right">
Forgot Password?
</a>
<input id="password" type="password" class="form-control" name="password" required data-eye>
<div class="invalid-feedback">
Password is required
</div>
</div>
<div class="form-group m-0">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
This is how I set up my Express to respond to the form submission by sending a new html page:
router.post("/index.html", function(req, res, next){
res.send(`
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Practical Excercise 3 - Part 3</title>
</head>
<body>
<p> Payment Received </p>
</body>
</html>
`);
});
Despite setting it up this way, when I click the login button in the HTML form, the POST request fails to return a new HTML page as intended. If anyone can point out where the problem lies, I would greatly appreciate it! Thank you all!