如何创建一个带有文本区域和两个按钮的表单，每个按钮都有不同的操作？答案

【问题标题】：How to create a form with a text area and two buttons, each with a different action?如何创建一个带有文本区域和两个按钮的表单，每个按钮都有不同的操作？
【发布时间】：2015-08-26 16:27:00
【问题描述】：

我正在使用 Express.js 和 Jade，并希望创建一个由文本区域和两个按钮组成的表单，每个按钮调用不同的操作。我想出了这个，但不确定这是否是正确的方法，因为按下按钮只会重定向，但提交一个按钮并不能将它与按下另一个按钮区分开来：

form(method='post', action='')
  textarea(wrap="soft" placeholder="Leave a reply...").fixit-reply
  a.btn.btn-primary(href="/resolve") Resolve
  a.btn.btn-warning(href="/comment") Comment

理想情况下，app.post('/resolve', handle); 捕获一个操作，app.post('/comment', handleC); 捕获另一个操作。

【问题讨论】：

@nnnnnn 如何测试按下了哪个按钮？
@nnnnnn 对，你是 :) 谢谢！如果您愿意，可以将其发布为答案，我会接受。

标签： javascript html express pug

【解决方案1】：

（根据要求，我最初的 cmets 形成了一个答案。）

虽然这可以在客户端用 JS 处理，但我不熟悉 Express.js 或 Jade，所以我不知道如何将 JS 解决方案与您现有的代码集成。

但是，如果两个按钮都是提交按钮，您可以在服务器端测试哪个按钮被按下并酌情重定向，从而避免需要任何客户端 JS。单击提交按钮的name 和value 将与其他表单数据一起提交。未点击的按钮不会包含在表单数据中。所以你可以给两个按钮name="action"，然后在服务器端测试那个参数并根据关联的value重定向。（或者为您的按钮提供不同的name 属性并测试服务器端是否存在特定按钮的参数。）当然，您需要为您的表单提供与服务器端操作相对应的action="something" 属性进行测试并重定向。

在我看来，仅服务器端的解决方案更适合此特定要求，因为它很容易做到，它使客户端的东西保持简单，并且（显然）即使在最终用户禁用 JavaScript 的浏览器中也能工作（这样做的用户并不多，但确实会发生）。

【讨论】：

【解决方案2】：

客户端，jade模板，2个按钮，用不同按钮的不同数据实现“xss”：

  form#formTestHtml1(name="htmlForm",method="post",action="/testhtml")
  button#btnSubmit1(type="submit" name="xss" value="s-html") Submit to sanitize-html
  br
  button#btnSubmit2(type="submit" name="xss" value="bleach") Submit to bleach

服务器端，检查“xss”的值（示例中我使用node.js和express进行路由）

router.post('/testhtml', function (req, res, next) {
    var sanitizedStr = "";
    if ( req.body.xss && req.body.xss == "sanitize-html" ) {
        sanitizedStr = "sanitize-html";
    } else
    if ( req.body.xss && req.body.xss == "bleach" ) {
        sanitizedStr = "bleach";
    } else {
        sanitizedStr = "xss undefined or unknown";
    }
    res.render(sanitizedStr);
});

这是一个真实的例子，我从一个页面中获取它，当我使用不同的 html/css sanitizer 测试 XSS 的 sn-ps 时。简化，ofc。

【讨论】：