After a 15-year break, I am diving back into web development and currently learning Node.js and ExpressJS. I have set up a registration form on index.html and now want to transfer the entered data to response.html. However, when I hit Submit, the form is posted to response.html without me being able to access the data. I can see it under Payload in Devtools, but I'm struggling to figure out how to populate the form on response.html using client-side JavaScript.
File Structure
https://i.stack.imgur.com/An48K.png
server.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.use(express.static(`${__dirname}/static`));
app.get('/index.html', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
});
app.post('/response.html', urlencodedParser, function (req, res) {
res.sendFile(`${__dirname}/static/response.html`);
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log(`Server is listening onhttp://${host}:${port}`);
});
index.html
https://i.stack.imgur.com/E6XCi.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="/response.html" method="POST">
<label>First Name: <input type="text" name="first_name"><br></label>
<label>Last Name: <input type="text" name="last_name"></label>
<input type="submit" value="Submit">
</body>
</html>
response.html
https://i.stack.imgur.com/L1fM4.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verify</title>
</head>
<body>
<h1>Verify Data</h1>
<form action="/process_final" method="POST">
<label>First Name: <input type="text" name="first_name"><br></label>
<label>Last Name: <input type="text" name="last_name"></label>
<input type="submit" value="Submit">
</body>
<button id='getHeaders' type='button'>Get Headers</button>
<script src='./response.js'></script>
</body>
</html>
I believe moving some processing from the server to the client side would be beneficial. While I know about templating engines like ejs and handlebars, I'm hesitant to use session storage or local storage due to potential security concerns with sensitive data. Attached are screenshots of the folder structure and HTML files alongside the server.js code.
After hours of research, I've come to the conclusion that accessing header information through client-side JavaScript may not be possible except for certain exceptions like User Agent.