Submit html form to nodejs

Question

I am trying to write a very simple project, of writing a web from and send it to node js, so I can save the information I get there.

so, I use some YouTube tutorials, but it doesn't seem to work

The form itself is just for practice, so I got it from the web:

  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Payment form example</title>
    <link href="../css/style.css" rel="stylesheet">
</head>

<body>
  <form action="/ipo" method="POST"  >
        <h1>Payment form</h1>
        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
        <section>
            <h2>Contact information</h2>
            <fieldset>
              <legend>Title</legend>
              <ul>
                  <li>
                    <label for="title_1">
                      <input type="radio" id="title_1" name="title" value="A">
                      Ace
                    </label>
                  </li>
                  <li>
                    <label for="title_2">
                      <input type="radio" id="title_2" name="title" value="K" >
                      King
                    </label>
                  </li>
                  <li>
                    <label for="title_3">
                      <input type="radio" id="title_3" name="title" value="Q">
                      Queen
                    </label>
                  </li>
              </ul>
            </fieldset>
            <p>
              <label for="name">
                <span>Name: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="text" id="name" name="username">
            </p>
            <p>
              <label for="mail">
                <span>E-mail: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="email" id="mail" name="usermail">
            </p>
            <p>
              <label for="pwd">
                <span>Password: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="password" id="pwd" name="password">
            </p>
        </section>
        <section>
            <h2>Payment information</h2>
            <p>
              <label for="card">
                <span>Card type:</span>
              </label>
              <select id="card" name="usercard">
                <option value="visa">Visa</option>
                <option value="mc">Mastercard</option>
                <option value="amex">American Express</option>
              </select>
            </p>
            <p>
              <label for="number">
                <span>Card number:</span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
                <input type="tel" id="number" name="cardnumber">
            </p>
            <p>
              <label for="expiration">
                <span>Expiration date:</span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="text" id="expiration" required="true" placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$">
            </p>
        </section>
        <section>
            <p> <button type="submit" id="submit">Validate the payment</button> </p>
        </section>
    </form>
  
</body>

</html>

And the server side is:

const host = 'localhost';
const port = 3000;
const express = require('express');
const app = express();
const bodyParser = require('body-parser')

app.use(express.static('public'))

var urlencodedParser = bodyParser.urlencoded({ extended: true })

app.get('/', function (req, res) {
    res.sendFile("/Users/idanhauser/Documents/NodeJs/web/client/pages/index.html");
  })

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
  })

app.post('/ipo', urlencodedParser, function (req, res) {
    console.log(req.params);
    console.log(req.body);
    console.log("not ok");
    res.send("ok");
  })

where the last function on the server, this is the function who's listen to my request. but when I am trying that, I get that req.body is empty {}.

What am I missing?

thank you so much Idan

niiir · Accepted Answer · 2021-12-20 04:29:41Z

2

body-parser is deprecated, you can use express to specify your middleware like so:

app.use(express.urlencoded({ extended: true }));

urlencoded is the parser you need to parse HTML form data.

answered Dec 20, 2021 at 4:29

niiir

3774 silver badges9 bronze badges

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

1 Comment

Idanhauser Over a year ago

Hey,Thank you. I have tried also to do that, but still I get an empty req.body...

Drew Powers · Accepted Answer · 2021-12-20 04:23:37Z

0

So you’ve set up urlencodedParser but you forgot to add it to your middleware:

  var urlencodedParser = bodyParser.urlencoded({ extended: true })
+ app.use(urlencodedParser);

Docs

answered Dec 20, 2021 at 4:23

Drew Powers

421 bronze badge

1 Comment

Idanhauser Over a year ago

Hey, thanks for your answer...I have tried that also, and also in the link you have added, I have tried the example "Express route-specific" , but both ways, don't work.

Idanhauser · Accepted Answer · 2021-12-20 09:03:09Z

0

Finally, I have succeed getting this data, in the server. I don't understand why, but after changing the form so it will have only name and email. it worked.

thank you!

answered Dec 20, 2021 at 9:03

Idanhauser

251 silver badge7 bronze badges

Collectives™ on Stack Overflow

Submit html form to nodejs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related