CODEWITHSUNDEEP
htmlnode.js
Onam Kwon
Onam Kwon

Reputation: 41

How to pass data from html client to NodeJS server?

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?

Upvotes: 0

Views: 493

Answers (2)

CODERWAL JI
CODERWAL JI

Reputation: 3

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);
});

Upvotes: 0

traynor
traynor

Reputation: 8622

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>

Upvotes: 1

Related Questions