From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/globaleventhandlers/onformdata/index.html | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/ja/web/api/globaleventhandlers/onformdata/index.html (limited to 'files/ja/web/api/globaleventhandlers/onformdata') diff --git a/files/ja/web/api/globaleventhandlers/onformdata/index.html b/files/ja/web/api/globaleventhandlers/onformdata/index.html new file mode 100644 index 0000000000..343eb03ef4 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onformdata/index.html @@ -0,0 +1,91 @@ +--- +title: GlobalEventHandlers.onformdata +slug: Web/API/GlobalEventHandlers/onformdata +tags: + - API + - Event Handler + - Experimental + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onformdata +--- +
{{ApiRef("HTML DOM")}}
+ +

onformdata は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、フォームのデータを表す項目リストが構築された後に発行される {{event("formdata")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。これはフォームが送信されたときに発生しますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターを呼び出しても発行することができます。 onformdata は {{domxref("HTMLFormElement")}} で利用できます。

+ +

構文

+ +
target.onclick = functionRef;
+
+ +

+ +

functionRef は関数名または 関数式です。この関数は唯一の引数として {{domxref("FormDataEvent")}} オブジェクトを受け取ります。

+ +

+ +
// 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);
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf