--- title: GlobalEventHandlers.onsubmit slug: Web/API/GlobalEventHandlers/onsubmit tags: - API - DOM - Event - Event Handler - HTML - 事件 - 事件接收器 - 属性 translation_of: Web/API/GlobalEventHandlers/onsubmit ---
{{ ApiRef("HTML DOM") }}

{{domxref("GlobalEventHandlers")}} 的 onsubmit 属性是一个处理 {{event("submit")}} 的 {{event("Event_handlers", "event handler")}}。

submit 事件会在用户点击提交按钮（<input type="submit"/> 元素）提交表单时触发。

语法

target.onsubmit = functionRef;

参数

functionRef 是一个函数名或 函数表达式。The function receives a {{domxref("FocusEvent")}} object as its sole argument.

例子

This example demonstrates {{domxref("GlobalEventHandlers.oninvalid", "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

{{EmbedLiveSample("Example")}}

规范

规范 状态 备注
{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}} {{Spec2('HTML WHATWG')}}  

浏览器兼容性

{{Compat("api.GlobalEventHandlers.onsubmit")}}

参见