Parsing Forms with Multiple Submit Buttons in Node.js with Express 4

Here is a very simple, bare minimum example to demonstrate how Express 4 and body-parser module.
I’m using ejs as the rendering engine because it looks like html.

Setup

.
├── index.js
├── package.json
└── views
    └── index.ejs

Here are the versions of the modules I used:
package.json

{
  "name": "multiple-submit-buttons-form",
  "dependencies": {
    "body-parser": "^1.15.0",
    "ejs": "^2.4.1",
    "express": "^4.13.4"
  }
}

index.ejs

The index page is very simple. Just a text field and two submit buttons. The key here is the formaction attribute. You’ll want each button points to a different link, so you can handle the request correspondingly in express.

<form action="/login" method="post">
    <div class="form-group">
        <label>To Do:</label>
        <input type="text" class="form-control" name="todo">
    </div>
    <button type="submit" class="btn btn-primary btn-lg" formaction="/top">Add to Top</button>
    <button type="submit" class="btn btn-primary btn-lg" formaction="/bottom">Add to Bottom</button>
</form>

index.js

The formaction attribute on the ejs file above correspond to different app.post() methods. Here I’m just going to print each todo in console and redirect the user to the original page.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// set ejs as rendering engine
app.set('view engine', 'ejs');

// parse html forms
app.use(bodyParser.urlencoded({ extended : false }));

// render the ejs page
app.get('/', function (req, res) {
  res.render('index.ejs');
});

// when Add to Top button is clicked
app.post('/top', function (req, res) {
  console.log(req.body.todo + " is added to top of the list.");
  res.redirect('/');
});

// when Add to Bottom button is clicked
app.post('/bottom', function (req, res) {
  console.log(req.body.todo + " is added to bottom of the list.");
  res.redirect('/');
});

app.listen(8000);
console.log('App is listening on PORT 8000');

Each button I click a button on the form does something a little different.

8 thoughts on “Parsing Forms with Multiple Submit Buttons in Node.js with Express 4”

  1. Shya. thanks a lot. It is really simple. But it took me hours to find some helpful tip. I’m prettynew with node and express so it helped me a lot! thanks again!

  2. Hello Shiya, thank you very much for this post. it helped me a lot. i have a question related to form action. consider i have a list of items repeated in a . i would attach for any item a bottom and clicking the bottom i would pass the name of the item. how can i do in ejs. i’m going mad. any help is very welcome
    thnak you
    G.

    1. Hi G, it seems like there an html tag that’s not rendered here. If your buttons are all generated, I’d suggest parsing the path in express with a param, like /button-pressed/:button-id.
      Might be a bit late, but good luck!

      1. hai Shiya, I have written the program exactly same as the above but i cound’t get the output in the console and when clicking the button it is giving an error as ‘todo’ is not defined

Leave a Reply

Your email address will not be published. Required fields are marked *