Question 189293 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Trying to display inputs from html to the console with NodeJs/Express

Here is my folder tree

Here is my server.js :


const express = require("express");
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');
app.use(express.static("public"));
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));

app.listen(3000, () => {
  console.log('connected to port 3000');
})


app.post("/send", (req, res) => {
  try {
    const firstname = req.body.firstname;
    const lastname = req.body.lastname;

    console.log(firstname, lastname);

    res.status(200).send("Data received");
  } catch (error) {
    console.error("Error:", error);
    res.status(500).send("Error");
  }
});

Here is my html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tableau dynamique</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Tableau dynamique</h1>

    <div class="container">
      <form action="http://localhost:3000/send" method="post" id="form-id" enctype="application/x-www-form-urlencoded" >
        <div class="input">
          Prénon : <input name="firstname" id="firstname-id" type="text" />
        </div>
        <div class="input">Nom : <input name="lastname" id="lastname-id" type="text" />
        </div>
        <button id="btn-id" type="submit">Ajouter une ligne</button>
      </form>
    </div>

    <table id="table-id" class="table table-striped table-dark container">
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Modification</th>
      </tr>
    </table>
    <div id="msg" class="mt-0"></div>

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="script.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>

  </body>
</html>

The thing is i try to get my lastname and firstname input display on the console to see if my form is indeed sent to my server.js but nothing shows on the console. Is it something wrong with the folder tree ? Something wront with form action ? Im really lost right now..

I tried changing the action route as well as the endpoint many times..

Tags:

3

Answers


  1. 0

    You can see the console output in the terminal where you run the server.js command at like this:

    enter image description here

    Login or Signup to reply.
  2. 0

    The code is correct, you can use POSTMAN to test the POST operation, or for temporarily checking if the value passed is right you can change POST to GET method, there you can see the value of console (firstname, lastname) in the terminal.

    In server.js

        const firstname = req.query.firstname;
    const lastname = req.query.lastname;

    Code : https://codesandbox.io/p/sandbox/ecstatic-wilson-h67nfh?file=%2Fpublic%2Findex.html%3A1%2C1

    Here is the official documentation for POSTMAN form data :
    https://learning.postman.com/docs/sending-requests/requests/#form-data

    Hope this will be helpful for you!

    Login or Signup to reply.
  3. 0

    You can see it in the terminal. Copy of this script:enter image description here

    On node.js 18.16.0

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search