blob: 0e8e0bb7113ee3b251a244554c7061746c996482 (
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
|
---
title: FormDataEvent.formData
slug: Web/API/FormDataEvent/formData
tags:
- API
- Experimental
- FormDataEvent
- Forms
- Property
- Reference
browser-compat: api.FormDataEvent.formData
translation_of: Web/API/FormDataEvent/formData
---
<div>{{APIRef("DOM")}}</div>
<p><code>formData</code> は {{domxref("FormDataEvent")}} インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す {{domxref("FormData")}} オブジェクトが入っています。</p>
<h2 id="Syntax">構文</h2>
<pre
class="brush: js"><em>formData</em> = formDataEvent.formData</pre>
<h3 id="Returns">返値</h3>
<p>{{domxref("FormData")}} オブジェクト</p>
<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>
<h2 id="Specifications">仕様書</h2>
{{Specifications}}
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>{{domxref("XMLHTTPRequest")}}</li>
<li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の使用</a></li>
<li><a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a></li>
<li>{{HTMLElement("Form")}}</li>
</ul>
|
