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!

score 2 · Accepted Answer · answered Feb 09 '18 at 21:29

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.

Thank you for the answer, I ended up making it work with js! — anako, Feb 12 '18 at 09:07

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

1 Answers1