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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.