cannot post login form html node js

Question

I have seen the same problem a few times on stack, but not one that seems to help me. I have a register form with a submit button that I am trying to get to submit data to MySQL and take me to the login page using node js. It successfully submits data, but will say Cannot POST / loginform.html.

Here is my index.html (register form)

<form target = "_blank" method = "post" action="//localhost:3000/LoginForm.html" onsubmit = "return validationRedirect();">
  <div class="container">
    <h1>Register</h1>
    <p>Please fill out this form to create an account for BAH University.</p>
    <hr>

    <img style="float: right; margin: 40px 20px 20px 20px;" src="views/photos/furman.jpg" width="770" height="310" border = "4" />
    <img style="float: right; margin: -24px 20px 0px 0px;" src="views/photos/furman1.jpg" width="770" height="310" border = "4" />

    <div class="relative"><em><i>Committed to Excellence</i></em></div>

    <label for="username"><b>Username</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="Enter Username" name="Username" required>
    <br>

    <label for="psw"><b>Password</b></label>
    <br>
    <input type="password" style="width: 600px" placeholder="Enter Password" name="Password" required>
    <br>  

    <label for="pswrepeat"><b>Repeat Password</b></label>
    <br>
    <input type="password" style="width: 600px" placeholder="Repeat Password" name="Passwordrpt" required>
    <br> 

    <label for="lastName"><b>Last Name</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="Last Name" name="LastName" required>
    <br>

    <label for="firstName"><b>First Name</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="First Name" name="FirstName" required>
    <br>

    <label for="address"><b>Address</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="Address" name="Address">
    <br>

    <label for="email"><b>Email</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="Email" name="Email" required>
    <br>

    <label for="phone"><b>Phone</b></label>
    <br>
    <input type="text" style="width: 600px" placeholder="Phone" name="Phone" required>
    <hr>

    <input name = "submit" type = "submit" value = "Register" class = "savebtn">
    <!--<a><input type ="button" value = "Login" class = "registerbtn" onclick = "window.location.href ='LoginForm.html'"></a>-->

  </div>

</form>
</body>
</html>

And my LoginForm.html

<form action="/LoginForm" method = "post">

  <div class="container">
    <h1>Login</h1>

    <img src="views/photos/furman.jpg" alt="BAH" style="float: left; margin: 10px -30px 45px 20px; width:
    708px;height:365px;" border = "4">
    <img src="views/photos/furman1.jpg" alt="BAH" style="float: left; margin: 10px -30px 45px 20px; width:
    708px;height:365px;" border = "4">
    </br></br></br>

    <label for="username"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="username" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <input type = "submit" value = "Login" class = "newlogbtn">
    <a><input type="button" class="newuserbtn" value = "New User" button onclick = "window.location.href ='index.html'"></a>

  </div>

  <div class="container" style="background-color: white">
    <bgcolor = "black"></bgcolor>
  </div>



</form>
</body>
</html>

index.js

var express = require('express');
var app = express();

var router = express.Router();
var mysql = require('mysql');
var http = require('http');

var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: ""
})
app.use(express.static(__dirname + '/public')); //for css and photos directory
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});
app.get('/LoginForm.html', function (req, res) {
    res.sendFile(__dirname + '/LoginForm.html');
});

app.post('/RegisterForm', function (req, res) {
    let name = req.body.Username + ' ' + req.body.Password + ' ' + req.body.Passwordrpt + ' ' + req.body.FirstName + ' ' + req.body.LastName + ' ' + req.body.Address + ' ' + req.body.Email + ' ' + req.body.Phone;

    res.send(name + ' Submitted Successfully!');

    //router.post('/registerform', function(req, res, next) {
    con.connect(function(err) {
        if (err) throw  err;
        console.log("connected");
        var sql = "INSERT INTO persontable (Username, Password, LastName, FirstName, Address, Email, Phone)VALUES('"+req.body.Username+"','"+req.body.Password+"', '"+req.body.LastName+"', '"+req.body.FirstName+"', '"+req.body.Address+"', '"+req.body.Email+"', '"+req.body.Phone+"')";
        con.query(sql, function(err, result)  {
            if(err) throw err;
            console.log("Register information saved.");
        });
    });
  //})    
});

var server = app.listen(3000, function () {
    console.log('Node server is running on port 3000..');
});

Thanks in advance for the help.

Answer 1

The method that worked for me was to use app.route method

https://expressjs.com/en/guide/routing.html

Eg:

app.route("url")
   .get(function())


   .post(function());

refer the documentation for more details on route

Answer 2

action="//localhost:3000/LoginForm.html"

You are trying to post to LoginForm.html .

 Cannot POST / loginform.html

The error message confirms this

app.get('/LoginForm.html', function (req, res) {

You have a GET handler for that URL.

 app.post('/RegisterForm', function (req, res) {

The only POST handler you have is for a different URL.

---

The route you are POSTing to needs to exist!

Answer 3

In your index.html there is :

action="//localhost:3000/LoginForm.html"

However in your server.js , your doing a get not a post on LoginForm.html

app.get('/LoginForm.html', function (req, res) {
    res.sendFile(__dirname + '/LoginForm.html');
});

Answer 4

your error is simply in your registration form, you target the file LoginForm.html, not your RegisterForm action. If you change:

<form target = "_blank" method = "post" action="//localhost:3000/LoginForm.html" onsubmit = "return validationRedirect();">

Into

<form target = "_blank" method = "post" action="//localhost:3000/RegisterForm" onsubmit = "return validationRedirect();">

You will get a post body in your requesthandler. :

Answer 5

You need to this:

    app.get('/LoginForm.html', function (req, res) {
    res.sendFile(__dirname + '/LoginForm.html');
 });