blob: 1ed9c9b0acedc0347b62ccba1c33b778d49dc527 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: GlobalEventHandlers.onformdata
slug: Web/API/GlobalEventHandlers/onformdata
translation_of: Web/API/GlobalEventHandlers/onformdata
---
<div>{{ApiRef("HTML DOM")}}</div>
<div></div>
<p>{{domxref("GlobalEventHandlers")}} 混入对象(mixin)的属性<code><strong>onformdata</strong></code> 是用于处理 {{event("formdata")}} 事件的, 它在整个列表展示所构建的表单数据之后被触发。触发会发生在表单发送时，但也可能由对某个{{domxref("FormData.FormData", "FormData()")}} 结构体的调用所触发。<code>onformdata</code> 在 {{domxref("HTMLFormElement")}}上有效。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>target</em>.onformdata = <em>functionRef</em>;
</pre>
<h3 id="Value">Value</h3>
<p><code>functionRef</code> 是一个函数名或者称为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. 此函数接受一个{{domxref("FormDataEvent")}}对象作为其唯一表达式参数。</p>
<h2 id="示例">示例</h2>
<pre class="brush: js">// grab reference to form
const formElem = document.querySelector('form');
// submit handler
formElem.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
// construct a FormData object, which fires the formdata event
new FormData(formElem);
});
// formdata handler to retrieve data
formElem.onformdata = (e) => {
console.log('formdata fired');
// Get the form data from the event object
let data = e.formData;
for (var value of data.values()) {
console.log(value);
}
// submit the data via XHR
var request = new XMLHttpRequest();
request.open("POST", "/formHandler");
request.send(data);
};</pre>
<h2 id="规范">规范</h2>
<table class="spectable standard-table" style="height: 168px; width: 644px;">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.GlobalEventHandlers.onformdata")}}</p>
<h2 id="另见">另见</h2>
<ul>
<li><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event"><code>formdata</code> event</a></li>
<li>{{domxref("FormDataEvent")}}</li>
<li>
<p><a href="/en-US/docs/Web/API/FormData/Using_FormData_Objects">Using FormData Objects</a></p>
</li>
</ul>
|
