Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML submitter value: identify which button sent the form

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

Only the submit button used to initiate a form submission contributes its name and value to the submitted entry list.

When it earns its place

A case list has two search scopes: unresolved and archived. Both buttons submit the same query field, but the activated button supplies the requested scope. This avoids a hidden field that script must rewrite before every submit. The server still checks that the scope belongs to an allowed set and applies access rules for archived records. Pressing Enter can trigger an implicit submission path, so place the intended default action first and test keyboard behavior on the actual form.

html
<form action="/cases" method="get">
  <label for="case-query">Search case records</label>
  <input id="case-query" name="query" type="search">
  <button type="submit" name="scope" value="unresolved">Unresolved cases</button>
  <button type="submit" name="scope" value="archived">Archived cases</button>
</form>

Browser boundary

The browser does not submit every button's value. A programmatic form submission may have no button value unless a submitter is specified, so the server must define a safe default for missing scope.

Cost and maintenance

Native submitter values replace a small amount of client script. The backend branching remains, and GET query strings should contain only information suitable for URLs, history, and logs.

Common Mistakes

  • Do not expect both scope values in one request.
  • Do not treat a missing scope as an authorization grant.
  • Do not put private case details in a GET query.

Connected lessons

html
forms
Storage details