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>
<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.
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!
Thank you a lot! Same as Gabriel!
How can we handle the form post dat by using the express router?
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.
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!
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
please help me with the above error i have said.
thanks in advance.
Omg THANK YOU VERY MUCH!!!
That was super helpful!
what happens to the /login action on the form tag?
please tell!!
Ah, that’s a part I forgot to delete from some previous code. I’ll correct that.
This solved my problem! Thank you sooo much!!
you saved me!!
Thank u very much!!! ,
this Solved My problem❤
Very helpful, exactly what I needed for a login form with a ‘Forgot Password’ button!
Thanks a lot Shiya Luo You Helped all of us a lot for which we took almost a lot of time to solve, Keep Helping Keep Smiling.