The onsubmit
property of the GlobalEventHandlers
mixin is an EventHandler
that processes submit
events.
The submit
event fires when the user submits a form.
Syntax
target.onsubmit = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a FocusEvent
object as its sole argument.
Example
This example demonstrates oninvalid
and onsubmit
event handlers on a form.
HTML
<form id="form"> <p id="error" hidden>Please fill out all fields.</p> <label for="city">City</label> <input type="text" id="city" required> <button type="submit">Submit</button> </form> <p id="thanks" hidden>Your data has been received. Thanks!</p>
JavaScript
const form = document.getElementById('form'); const error = document.getElementById('error'); const city = document.getElementById('city'); const thanks = document.getElementById('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeAttribute('hidden'); } function submit(event) { form.setAttribute('hidden', ''); thanks.removeAttribute('hidden'); // For this example, don't actually submit the form event.preventDefault(); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onsubmit' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onsubmit | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
submit
event