Identifying the button which submitted a form in javascript

DanielSeptember 16, 2022December 26, 2022

Let's say we have a form that has multiple submit buttons:

<form>
  <input type="email" placeholder="Your email ..." />
  <button class="red" value="Red" type="submit">Red</button>
  <button class="green" value="Green" type="submit">Green</button>
</form>

We can call the submitter property of the submit event to determine the button used to send the form:

form.addEventListener('submit', e => {
  e.preventDefault()
  const {submitter} = e
  alert(`Form submitted with the ${submitter.value} button`)
})

Checkout the full working example below:

See the Pen
CSS User Select by JS Craft (@js-craft)
on CodePen.

You may be also interested to checkout this example for appending an array with the FormData Api and how to have a submit button placed outside of its html form.