如何将表单字段绑定到播放框架中的特定提交按钮？ （POST 申请表）

Question

基本上我想在我的视图 html 模板中有两个按钮，并在我的表单中评估 Int 参数以获取 POST-请求，具体取决于单击了哪个按钮。

就像点击了 button-number-1 我希望我的 numParam 为 1

如果点击了 button-number-2，我希望我的 numParam 为 2

控制器代码：

case class Data(textParam: Option[String], numParam: Option[Int])

val form = Form(
  mapping(
    "textParam" -> optional(text),
    "numParam" -> optional(number)
  )(Data.apply)(Data.unapply)

)

查看代码：

@helper.form(helper.CSRF(routes.MyController.display)) {
    @helper.inputText(form("paramA"))
    <input type="submit" value="I want numParam to be 1">
    <input type="submit" value="I want numParam to be 2">
}

非常感谢任何帮助！

Answer 1

不知道直接用Play能不能做到，建议加点客户端JS。

你可以做什么：

• 删除<input type="submit" ...>，因为它不允许您在提交前修改表单内容
• 改为添加两个 <button>
• 添加隐藏输入numValue
• 使用javascript（在本例中：jquery）设置单击其中一个按钮时隐藏输入的值
• 使用 javascript
提交表格

可能是这样的（警告：未经测试）：

@helper.form(helper.CSRF(routes.MyController.display), 'id -> "myForm") {
    @helper.inputText(form("paramA"))
    <button id="submit_numValue1">I want numParam to be 1</button>
    <button id="submit_numValue2">I want numParam to be 2</button>
    <input type="hidden" id="hiddenNumValue" name="numValue" value="0">
}

<script>
  // add an `onclick` handler to first button
  $('#submit_numValue1').click(function() {
    // set hidden input to '1'
    $('#hiddenNumValue').val("1");
    // submit the form
    $('#myForm').submit();
  });

  // add an `onclick` handler to the second button
  $('#submit_numValue2').click(function() {
    // set hidden input to '2'
    $('#hiddenNumValue').val("2");
    // submit the form
    $('#myForm').submit();
  });
</script>

如上所述，这要求 jquery 在客户端是 "imported" 作为 javascript 库。

不能保证这是 Play 中最惯用的解决方法，但 似乎表明这种方法至少并不少见。