Problem Statement
What does the formaction attribute on a submit button do?
Explanation
The formaction attribute on a submit button overrides the form's action URL for that specific button. This allows different buttons to submit the same form to different URLs. For example, one form might have a button to save data and another button to delete data, each going to different endpoints. The formaction is specified on the button element, not the input. When that button is clicked, the form submits to the URL in formaction instead of the form's action attribute. This is useful for forms with multiple actions like Save, Delete, or Archive. You can also use formmethod to override the form's method for specific buttons. These attributes give you flexibility to handle different actions without multiple forms. The formaction attribute only works on submit buttons, either button type equals submit or input type equals submit.
Code Solution
SolutionRead Only
<!-- Multiple submit buttons with different actions -->
<form action="/default" method="POST">
<input type="text" name="data" required>
<!-- Submit to /save -->
<button type="submit"
formaction="/save">
Save
</button>
<!-- Submit to /delete -->
<button type="submit"
formaction="/delete"
formmethod="DELETE">
Delete
</button>
<!-- Submit to /archive -->
<button type="submit"
formaction="/archive">
Archive
</button>
</form>
<!-- Article editor with multiple actions -->
<form action="/articles" method="POST">
<input type="text" name="title" placeholder="Title" required>
<textarea name="content" required></textarea>
<button type="submit"
formaction="/articles/draft">
Save Draft
</button>
<button type="submit"
formaction="/articles/publish">
Publish
</button>
<button type="submit"
formaction="/articles/preview"
formmethod="GET"
formtarget="_blank">
Preview
</button>
</form>