HTML submit overrides: one form, two deliberate destinations

Last updated: 5 Oct 20267 min read

tutorial

A submit button can override selected form submission attributes for the submission that button initiates.

Use it for a real task

A receipt editor saves a draft to one endpoint and submits a completed review to another. Both buttons belong to the same form, but only the final action changes the form destination. Each endpoint must validate and authorize its own operation; a client-controlled override is not a privilege boundary. Keep button text explicit because two similarly styled submitters can otherwise hide a material difference.

<form action="/receipts/R-47/draft" method="post">
  <label for="review-note">Review note</label>
  <textarea id="review-note" name="note" required></textarea>
  <button type="submit">Save draft</button>
  <button type="submit" formaction="/receipts/R-47/finalize">Finalize review</button>
</form>

What the markup guarantees

Both endpoints receive the successful form controls. A required note still applies to both submissions in this sample; if drafts may omit it, design that separate rule deliberately and test the client and server behavior.

Cost and limits

The markup needs no click handler. The complexity moves to server rules and tests for double submissions, stale state, and distinguishing a draft from a final decision.

Common Mistakes

Do not assume formaction restricts who can call an endpoint.
Do not leave two submit buttons with indistinguishable labels.
Do not accidentally relax validation for a final action.

Connected lessons

html

forms