Handling Forms and Request Data

⏱ Estimated reading time: 3 min

In web applications, handling user input from forms is a common task. Express.js provides easy ways to capture and process this data from GET or POST requests.

1. Parsing Request Data

Express uses middleware to parse incoming request data:

1. JSON Data – Sent by APIs or JavaScript frontends.

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

2. Handling GET Requests

GET requests send data via query parameters:

HTML Form Example:

<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Express Route:

app.get('/search', (req, res) => {
  const query = req.query.q;  // Access query parameter
  res.send(`You searched for: ${query}`);
});

• URL: /search?q=express → Response: You searched for: express

3. Handling POST Requests

POST requests send data via the request body:

HTML Form Example:

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

Express Route:

app.use(express.urlencoded({ extended: true })); // Parse URL-encoded bodies

app.post('/submit', (req, res) => {
  const { username, password } = req.body;
  res.send(`Username: ${username}, Password: ${password}`);
});

4. Handling JSON Requests

For APIs or JavaScript fetch requests:

Express Route:

app.use(express.json()); // Parse JSON bodies

app.post('/api/data', (req, res) => {
  const data = req.body;
  res.json({ message: 'Data received', data });
});

Fetch Example:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 })
});

5. Accessing Route Parameters

Route parameters can also be used to capture data from the URL:

app.get('/users/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

• URL: /users/123 → Response: User ID: 123

6. Best Practices

• Use express.json() for APIs and express.urlencoded() for HTML forms.

• Always validate and sanitize user input before using it.

• Use POST for sensitive data (e.g., passwords) and GET for simple queries.

• Modularize routes for cleaner code in large projects.

7. Example Project Structure

express-app/
│
├─ views/
│   └─ form.ejs
│
└─ app.js

views/form.ejs:

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Username">
  <button type="submit">Submit</button>
</form>

app.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => res.render('form'));
app.post('/submit', (req, res) => {
  res.send(`Username: ${req.body.username}`);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Handling forms and request data is essential for building interactive web applications, whether for APIs or server-rendered HTML forms.

app.use(express.json());