How to bind a form field to the specific submit button in play framework? (form for POST request)

Question

Basically I want to have two buttons in my view html template, and evaluate the Int param in my form for POST-request depending on which button has been clicked.

Like if button-number-1 was clicked I want my numParam to be 1

and if button-number-2 was clicked I want my numParam to be 2

Controller code:

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

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

)

View code:

@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">
}

Would appreciate any help!

Answer 1

I don't know whether this can be done with Play directly, so I propose to add some client-side JS into the mix.

What you could do:

• Delete the <input type="submit" ...>, because it does not give you the possibility to modify form content before submission
• add two <button>s instead
• add a hidden input numValue
• use javascript (in this case: jquery) to set the value of the hidden input when one of the buttons is clicked
• submit the form using javascript

Something along these lines maybe (warning: untested):

@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>

As mentioned above, this requires that jquery is "imported" on the client-side as a javascript library.

No guarantee that this is the most idiomatic way to solve it in Play, but this answer seems to indicate that this approach is at least not uncommon.