CODEWITHSUNDEEP
formsscalaplayframeworkhttp-postview-helpers
anako
anako

Reputation: 125

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

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!

Upvotes: 1

Views: 806

Answers (1)

Andrey Tyukin
Andrey Tyukin

Reputation: 44957

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.

Upvotes: 2

Related Questions