Access Data During HTML form Post Back

Question

I'm re-teaching myself web development after 15-years of no web development. I'm currently learning Node.js and ExpressJS. I have a registration form on index.html. I'm trying to transfer the data entered to a form on response.html. When I click Submit, the form is posted to response.html. In response.html under Devtools I see the data under Payload. How do I access this data so I can populate the form using client-side JavaScript on response.html?

File Structure

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

<!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

<!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>

My thinking is this will unload some of the processing from the server. I am aware of templating engines such as ejs and handlbars. I'm also aware of session storage and local storage. I'm reluctant to use storage since there may be sensitive data used in the final product. Attached are screenshots of the folder structure and html files. Also included is the html code and server.js.

After seven hours of searching the web, my conclusion is this is not possible. From what I read accessing the header information using client-side JavaScript is not possible. There are a few exceptions such as User Agent though.

Answer 1

You can access the data in the server side using req.body.first_name and req.body.last_name or you can destructure it like const { firstname, lastname } = req.body

Access Data During HTML form Post Back

Question

1 answers

solution1
0 2023-02-01 04:35:15

Access Data During HTML form Post Back

Question

1 answers

solution1 0 2023-02-01 04:35:15

solution1
0 2023-02-01 04:35:15