How to pass data from html client to NodeJS server?

Question

I would like to send some data from client to NodeJS server using POST method.
Below is my part of html code.

<form action="http://localhost:8080/data/name/:name/ssn/:ssn" method="post" id="signup">
    <h1>Personal info post example</h1>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" placeholder="Enter your fullname" />
        <small></small>
    </div>
    <div class="field">
        <label for="ssn">SSN:</label>
        <input type="text" id="ssn" placeholder="Enter your SSN" />
        <small></small>
    </div>
    <button type="submit">Submit</button><br><br>
</form>

Below is my part of server.js.
I tried to print out everything that I can think of what I can.
I wrote down the results as comments as well.
This is the result when I enter 'a' for the name and 'b' for the ssn and submit it.

app.post('/data/name/:name/ssn/:ssn', function(req, res) {
    console.log('req.query: ', req.query); // {}
    console.log('req.query.name: ',req.query.name); // undefined
    console.log('req.query.ssn: ',req.query.ssn); // undefined
    console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
    console.log('req.params.name: ',req.params.name); // :name
    console.log('req.params.ssn: ',req.params.ssn); // :ssn
});

When I type 'a' and 'b' into search boxes and hit the submit button, the web browser starting to load but never ends and my VSC shows the result.
Can anyone help me what I need to fix?

traynor · Accepted Answer · 2022-01-25 13:09:36Z

1

looks like you're mixing req.params and req.query, while you actually need req.body

try this:

add this to server.js (you need to install body-parser):

const bodyParser = require('body-parser');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// parse application/json
app.use(bodyParser.json());

app.post('/data', function(req, res) {
    console.log('req.body: ', req.body);

    const {name, ssn} = req.body;
    console.log('name: ', name);
    console.log('ssn: ', ssn);
    res.json(req.body);
});

and change HTML form (add name attribute, that's your data):

<form action="http://localhost:8080/data" method="post" id="signup">
    <h1>Personal info post example</h1>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" />
        <small></small>
    </div>
    <div class="field">
        <label for="ssn">SSN:</label>
        <input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" />
        <small></small>
    </div>
    <button type="submit">Submit</button><br><br>
</form>

answered Jan 25, 2022 at 13:09

traynor

10.6k3 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Onam Kwon Over a year ago

Thank you, this is what I want. It works perfectly.

CODERWAL JI · Accepted Answer · 2022-01-25 15:51:32Z

0

your code is good. But you are facing this problem because the server is not sending any data after submit.

First, there should be something to handle GET:

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

app.get('/', (req, res)=>{
    res.sendFile('index.html');
    console.log('Someone saw your website!');
})

app.listen(80);

Secondly, return something after submit:

app.post('/data/name/:name/ssn/:ssn', function(req, res) {
    console.log('req.query: ', req.query); // {}
    console.log('req.query.name: ',req.query.name); // undefined
    console.log('req.query.ssn: ',req.query.ssn); // undefined
    console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
    console.log('req.params.name: ',req.params.name); // :name
    console.log('req.params.ssn: ',req.params.ssn); // :ssn
    res.end('Thankyou, \n Your Name:'+req.params.name+'\n Your Ssn:'+req.params.ssn);
});

edited Jan 25, 2022 at 15:51

answered Jan 25, 2022 at 6:17

CODERWAL JI

33 bronze badges

3 Comments

Onam Kwon Over a year ago

I tried it and it shows 'Thankyou!' on the website when I submitted it. But on the serverside terminal, 'a' and 'b' is not still showing so I cannot handle the variables on the server side. Do you know what the problem is?

Onam Kwon Over a year ago

when I type "localhost:8080/data/name/a/ssn/b" on the url search box in the browser, I can see the result on the server side terminal. but it is still not showing the result when I use submit button.

CODERWAL JI Over a year ago

Hi, did you mean on the client side? Check the new code 😀

Collectives™ on Stack Overflow

How to pass data from html client to NodeJS server?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related