javascript - 如何知道按下了哪个按钮？

Question

我正在学习 node.js 和 express 框架的基础知识。我有一个带有两个按钮的简单页面：

<form action="/home2" method="post">
    <button name="butt1">butt1</button>
    <button name="butt2">butt2</button>
</form>

我想在控制台中查看按下了哪个按钮：

router.post('/', function(req, res, next) {
    console.log(req.body.name);
    res.render('home2', { title: 'post' });
});

在控制台中我只看到

undefined

如何访问按钮的名称？

Answer 1

首先，由于您使用的是 POST，我假设您已经拥有 body-parser 中间件，如果没有，请检查Body Parser Middleware

您的代码需要一些更改

在 HTML 中

<form action="/home2" method="post">
    <button name="butt" value='1'>butt1</button>
    <button name="butt" value='2'>butt2</button>
</form>

并在快递

router.post('/home2', function(req, res, next) {
    console.log(req.body.butt);
    res.render('home2', { title: 'post' });
});

req.body.name需要是req.body.butt

/需要是/home2

Answer 2

我想这对你会有帮助。

<form action="/home2" method="post">
   <button name="butt1">butt1</button>
   <button name="butt2">butt2</button>
</form>


router.post('/home2', function(req, res, next) {

  if(req.body.hasOwnProperty("butt1")){
     console.log("butt1 clicked");
  }else{
     console.log("butt2 clicked");
  }
  res.render('home2', { title: 'post' });
});

Answer 3

您可以使用的一个技巧是将两者用作提交按钮：

<form action="/home2" method="post">
    <button name="button_id" value="1" type="submit">butt1</button>
    <button name="button_id" value="2" type="submit">butt2</button>
</form>

在服务器端，您现在应该获得button_id1 或 2 的值，具体取决于单击的按钮。

Answer 4

我知道这是一个非常古老的问题，但我有同样的问题，我找到了更好的解决方案，所以我想我会分享它。您可以将不同的表单操作添加到不同的按钮，并在您的应用程序中对操作执行不同的操作。例子：

<form action="/home2" method="post">
    <button formaction="wigglebutt" name="butt" value='1'>butt1</button>
    <button formaction="slapbutt" name="butt" value='2'>butt2</button>
</form>

然后在后端：

app.post("/wigglebutt", (req, res) => {

});

app.post("/slapbutt", (req, res) => {

});