Not sure how I only found out about this only today, but a <button>
HTML element without a type
attribute defaults to the submit
value. Test it yourself with the test rig:
<html>
<body>
<form id="test">
<input type="text" />
<button type="submit">Button with Submit Type</button>
<button>Button With No Type</button>
<button type="button">Button with Button Type</button>
<button type="reset">Button With Reset Type</button>
</form>
<script>
var form = document.getElementById('test')
form.addEventListener('submit', function(e) {
e.preventDefault()
console.log('form submitted!')
}, false)
</script>
</body>
So if you still want to have buttons in the form that do not trigger the submit event, you have to explicitly give it a type
of button
.
This is confirmed by the W3C spec:
The missing value default is the Submit Button state.
- https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type