blob: b6a21f0287085a854f38e16906abf73bed125162 (
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
|
---
title: FormDataEvent
slug: Web/API/FormDataEvent
tags:
- API
- Experimental
- FormDataEvent
- Forms
- Landing
- Reference
browser-compat: api.FormDataEvent
translation_of: Web/API/FormDataEvent
---
<p>{{APIRef("DOM")}}</p>
<p><strong><code>FormDataEvent</code></strong> インターフェイスは <a href="/ja/docs/Web/API/HTMLFormElement/formdata_event"><code>formdata</code> イベント</a>を表します。 — このようなイベントは {{domxref("HTMLFormElement")}} オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターの呼び出しでも発行させることができます。</p>
<p>これにより、 {{domxref("XMLHttpRequest")}} などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 <code>formdata</code> イベントの発行に応じて、 {{domxref("FormData")}} オブジェクトをすばやく取得することができます (<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>を参照)。</p>
<h2 id="Constructor">コンストラクター</h2>
<dl>
<dt>{{domxref("FormDataEvent.FormDataEvent","FormDataEvent()")}}</dt>
<dd>新しい <code>FormDataEvent</code> オブジェクトインスタンスを生成します。</dd>
</dl>
<h2 id="Properties">プロパティ</h2>
<p><em>親インターフェイスである {{domxref("Event")}} からプロパティを継承しています。</em></p>
<dl>
<dt>{{domxref("FormDataEvent.formData")}}</dt>
<dd>イベントが発行された時点のフォーム内に含まれるデータを表す {{domxref("FormData")}} オブジェクトです。</dd>
</dl>
<h2 id="Methods">メソッド</h2>
<p><em>親インターフェイスである {{domxref("Event")}} からメソッドを継承しています。</em></p>
<h2 id="Examples">例</h2>
<pre class="brush: js">// フォームの参照を得る
const formElem = document.querySelector('form');
// submit ハンドラー
formElem.addEventListener('submit', (e) => {
// on form submission, prevent default
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>
<h2 id="Specifications">仕様書</h2>
{{Specifications}}
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>{{domxref("XMLHTTPRequest")}}</li>
<li>{{domxref("FormData")}}</li>
<li><a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a></li>
<li>{{HTMLElement("Form")}}</li>
</ul>
|
