Using node.js how to send and store data from a simple HTML form

Question

I am beginner to web development. I created a simple form using HTML and CSS, which contained three widgets i.e. name, email and phone. Now I want to send data to the server and store in it using NodeJS. What should I do?

Here is my HTML file.

<!DOCTYPE html>
<html>
    <head>
        <Meta charset = "uft-8">
        <title> Singing up for The Event </title>
        <link rel="stylesheet" href="styles.css">

    </head>
<body>
<form action = "/registration-form" method = "post">
    <div>
        <label for="name"> Name: </label>
        <input type="text" id="name" name="user_name">
    </div>

    <div>
        <label for="mail"> E-mail: </label>
        <input type="email" id="mail" name="user_mail">
    </div>

    <div>
        <label for="phone"> Phone:</label>
        <input type="number" id="phone" name="user_phone"></input>
    </div>

    <div class="button">
        <button type="submit">Register!</button>
    </div>

    <div class="button">
        <button type="Reset">Reset!</button>
    </div>
</form>
</body>
</html>

Here is my server.js file.

var express = require('express');

var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
var port = process.env.PORT || 63342;

//POST
app.post('/api/users', function(req, res) {
    var user_name = req.body.user_name;
    var user_mail = req.body.user_mail;
    var user_phone = req.body.user_phone;

    res.send(user_name + ' ' + user_mail + ' ' + user_phone);
})

//starting the server
app.listen(port);
console.log("Running at port 63342...");

I am not sure what to do next. How to check if the request was successful and is there any way to make a request via opening and filling the HTML form directly.

_“Postman is not being successful, what address should write in URL box of the Postman?”_ - the one you want to send the request to would usually be a favorite …? — CBroe, Jun 26 '18 at 06:43
I mean when I run HTML file there also an address for that. Does that address have anything to do with it? — Goodfellow, Jun 26 '18 at 06:45
Well of course it would be … You specifically set up the route `/api/users` to handle these POST requests, so where else would you send them in the first place in this case? // This really rather sounds like you should go through some beginner’s tutorials on the matter, rather than asking about such specifics here. — CBroe, Jun 26 '18 at 06:47
Yes, I guess it's better to follow a simple NodeJS/Express tutorial, because when you get your post successful, how do you want to store your data?, database?, files?, you don't have anything in your code about that. — Eduardo Yáñez Parareda, Jun 26 '18 at 06:49
I already gave that address too, it gives undefined for all three variables. — Goodfellow, Jun 26 '18 at 06:49
The URL you need to POST to is "localhost:63342/api/users". Which URL are you trying ? — Vishal-Lia, Jun 26 '18 at 06:54
I guess form action should be "localhost:63342/api/users", so once u submit the form u will have a POST request. — Vishal-Lia, Jun 26 '18 at 07:01
@Vishal-Lia I changed that, but the problem remains. When I open the HTML file, it has URL localhost/63342 (I was confused about the URL because of the port number) but when I try to run server.js on the same port it gives me error.Now I changed the port of server.js to 3000. Now it is running just fine. Postman is giving status 200(ok) but in the preview window it gives undefined for all three parameters. — Goodfellow, Jun 26 '18 at 07:15
@Goodfellow I think (not sure) that your JSON in `req.body` is not parsed and is still raw text. Use `const data = JSON.parse(req.body);`. Also might be a duplicate of this question : https://stackoverflow.com/questions/10005939/how-do-i-consume-the-json-post-data-in-an-express-application — Seblor, Jun 26 '18 at 07:26

score 0 · Answer 1 · answered Jun 26 '18 at 07:33

How did you define your model schema(database) or collections : you can check value of the response(res).

  if(err) {
        res.json({success: false, message: `Failed to create a new list. Error: ${err}`});
    }
    else
        res.json({success:true, message: "Added User successfully."});

Using node.js how to send and store data from a simple HTML form

1 Answers1