blob: 1d63da98896ca0a383b2a13a951f81abc5437199 (
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: 'HTMLFormElement: formdata イベント'
slug: Web/API/HTMLFormElement/formdata_event
tags:
- Event
- Forms
- Reference
- formevent
browser-compat: api.HTMLFormElement.formdata_event
translation_of: Web/API/HTMLFormElement/formdata_event
---
<div>{{APIRef}}</div>
<p><strong><code>formdata</code></strong> イベントは、フォームのデータを表すエントリーリストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。</p>
<h2 id="General_info">一般情報</h2>
<table class="properties">
<tbody>
<tr>
<th>バブリング</th>
<td>なし</td>
</tr>
<tr>
<th>キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th>インターフェイス</th>
<td>{{DOMxRef("FormDataEvent")}}</td>
</tr>
<tr>
<th>イベントハンドラープロパティ</th>
<td>{{domxref("GlobalEventHandlers.onformdata")}}</td>
</tr>
</tbody>
</table>
<h2 id="Examples">例</h2>
<pre class="brush: js">// フォームの参照を得る
const formElem = document.querySelector('form');
// submit ハンドラー
formElem.addEventListener('submit', (e) => {
// フォームの送信時、既定の動作を抑止
e.preventDefault();
// FormData オブジェクトを構築し、 formdata イベントが発行される
new FormData(formElem);
});
// データを受け取るための formdata ハンドラー
formElem.addEventListener('formdata', (e) => {
console.log('formdata fired');
// イベントオブジェクトからフォームデータを取得する
let data = e.formData;
for (var value of data.values()) {
console.log(value);
}
// XHR でデータを送信
var request = new XMLHttpRequest();
request.open("POST", "/formHandler");
request.send(data);
});</pre>
<p><code>onformdata</code> 版はこのようになります。</p>
<pre class="brush: js">formElem.onformdata = (e) => {
console.log('formdata fired');
// イベントオブジェクトからフォームデータを取得する
let data = e.formData;
for (var value of data.values()) {
console.log(value);
}
// XHR でデータを送信
var request = new XMLHttpRequest();
request.open("POST", "/formHandler");
request.send(data);
};</pre>
<h2 id="Specifications">仕様書</h2>
{{Specifications}}
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>HTML の {{htmlElement("form")}} 要素</li>
<li>{{domxref("FormDataEvent")}}</li>
</ul>
|
