grails: specify form action with button vs input type=submit / g:actionSubmit

Question

I have a form with multiple buttons which submit the form to different controller actions.

This works fine for <g:actionSubmit, but I would like to use <button type="submit" so I can have more control over the UI.

problem:

The first button works as expected (generated by g:actionSubmit)

But the second button does not submit to the target action ..

Does anyone have any insight as to what is going on here?

(I've also tried using the button formaction attribute.. without success)

<form action="/handover/update/19" method="post">
<input type="submit" name="_action_submitForReview" value="Submit For Review" class="btn btn-primary">

<button type="submit" name="_action_submitForReview" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Submit For Review
</button>

<input type="submit" name="_action_update" value="Save" class="btn btn-secondary">
</form>

update:

The params map received by the controller contains they key _action_submitForReview when using <input type="submit", but not when using <button type="submit". Setting a value attribute on the button does not help.

I assume that this is the root of the problem..

Answer 1

Ensure that the params map received by the controller contains the key _action_submitForReview regardless of which button is clicked, you can modify your form as follows:

<form action="/handover/update/19" method="post">
  <input type="hidden" name="_action_submitForReview" value=""> <!-- Hidden input to ensure the key is always present -->
  <input type="submit" value="Submit For Review" class="btn btn-primary generated-by-g-actionSubmit">
  <button type="submit" class="btn btn-primary" onclick="setSubmitForReviewValue()">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Submit For Review
  </button>
  <input type="submit" name="_action_update" value="Save" class="btn btn-secondary">
</form>

<script>
  function setSubmitForReviewValue() {
    // Before submitting the form, set the value of the hidden input to indicate the action
    document.querySelector('input[name="_action_submitForReview"]').value = 'true';
  }
</script>

Adding a hidden input element inside the form ensures that the key _action_submitForReview is always present in the params map regardless of which button is clicked.

The setSubmitForReviewValue() function is sets the value of the hidden input to 'true' just before the form is submitted.