W3cubDocs

/Web APIs

GlobalEventHandlers.onsubmit

The onsubmit property of the GlobalEventHandlers mixin is an event handler 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 SubmitEvent 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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
onsubmit
1
12
9
9
≤12.1
1
1
18
9
≤12.1
1
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit