From e7558a60eb9de82f984b2f30df55fc6a8b48ae11 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Jul 2021 01:08:24 +0900 Subject: Web/API/FormDataEvent を新規翻訳 (#1489) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/07/11 時点の英語版に基づき新規翻訳 --- files/ja/web/api/formdataevent/formdata/index.html | 75 +++++++++++++++ .../web/api/formdataevent/formdataevent/index.html | 62 +++++++++++++ files/ja/web/api/formdataevent/index.html | 88 ++++++++++++++++++ .../api/htmlformelement/formdata_event/index.html | 102 +++++++++++++++++++++ 4 files changed, 327 insertions(+) create mode 100644 files/ja/web/api/formdataevent/formdata/index.html create mode 100644 files/ja/web/api/formdataevent/formdataevent/index.html create mode 100644 files/ja/web/api/formdataevent/index.html create mode 100644 files/ja/web/api/htmlformelement/formdata_event/index.html (limited to 'files') diff --git a/files/ja/web/api/formdataevent/formdata/index.html b/files/ja/web/api/formdataevent/formdata/index.html new file mode 100644 index 0000000000..0e8e0bb711 --- /dev/null +++ b/files/ja/web/api/formdataevent/formdata/index.html @@ -0,0 +1,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 +--- +
{{APIRef("DOM")}}
+ +

formData は {{domxref("FormDataEvent")}} インターフェイスの読み取り専用プロパティで、このイベントが発行された時点のフォームに含まれていたデータを表す {{domxref("FormData")}} オブジェクトが入っています。

+ +

構文

+ +
formData = formDataEvent.formData
+ +

返値

+ +

{{domxref("FormData")}} オブジェクト

+ +

例

+ +
// フォームの参照を取得
+
+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);
+});
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/formdataevent/formdataevent/index.html b/files/ja/web/api/formdataevent/formdataevent/index.html new file mode 100644 index 0000000000..fbdc54fb29 --- /dev/null +++ b/files/ja/web/api/formdataevent/formdataevent/index.html @@ -0,0 +1,62 @@ +--- +title: FormDataEvent() +slug: Web/API/FormDataEvent/FormDataEvent +tags: +- API +- Constructor +- Experimental +- FormDataEvent +- Forms +- Reference +browser-compat: api.FormDataEvent.FormDataEvent +translation_of: Web/API/FormDataEvent/FormDataEvent +--- +

{{APIRef("DOM")}}

+ +

FormDataEvent() コンストラクターは、新しい {{domxref("FormDataEvent")}} オブジェクトインスタンスを生成します。

+ +

構文

+ +
new FormDataEvent(type[, formEventInit]);
+ +

値

+ +
+
type
+
{{domxref("DOMString")}} で、このイベントの名前を表します。
+
formEventInit {{optional_inline}}
+
FormEventInit 辞書で、以下の任意のフィールドを取ります。 +
    +
  • bubbles: true または false の値で、イベントがバブリングするかどうかを示します。既定値は false です。
    • +
  • cancelable: true または false の値で、イベントがキャンセル可能であるかどうかを示します。既定値は false です。
    • +
  • composed: true または false の値で、イベントがシャドウルートの外側でリスナーを起動するかどうかを示します。既定値は false です。
    • +
  • formData: FormDataEvent に事前に入力する {{domxref("FormData")}} オブジェクトです。これには、 {{domxref("FormDataEvent.formData")}} プロパティを介してアクセスします。
    • +
+
+
+ +

例

+ +
let fd = new FormData();
+fd.append('test', 'test');
+
+let fdEv = new FormDataEvent('formdata', { formData: fd });
+
+for (let value of fdEv.formData.values()) {
+  console.log(value);
+}
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/formdataevent/index.html b/files/ja/web/api/formdataevent/index.html new file mode 100644 index 0000000000..b6a21f0287 --- /dev/null +++ b/files/ja/web/api/formdataevent/index.html @@ -0,0 +1,88 @@ +--- +title: FormDataEvent +slug: Web/API/FormDataEvent +tags: + - API + - Experimental + - FormDataEvent + - Forms + - Landing + - Reference +browser-compat: api.FormDataEvent +translation_of: Web/API/FormDataEvent +--- +

{{APIRef("DOM")}}

+ +

FormDataEvent インターフェイスは formdata イベントを表します。 — このようなイベントは {{domxref("HTMLFormElement")}} オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターの呼び出しでも発行させることができます。

+ +

これにより、 {{domxref("XMLHttpRequest")}} などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 formdata イベントの発行に応じて、 {{domxref("FormData")}} オブジェクトをすばやく取得することができます (FormData オブジェクトの使用を参照)。

+ +

コンストラクター

+ +
+
{{domxref("FormDataEvent.FormDataEvent","FormDataEvent()")}}
+
新しい FormDataEvent オブジェクトインスタンスを生成します。
+
+ +

プロパティ

+ +

親インターフェイスである {{domxref("Event")}} からプロパティを継承しています。

+ +
+
{{domxref("FormDataEvent.formData")}}
+
イベントが発行された時点のフォーム内に含まれるデータを表す {{domxref("FormData")}} オブジェクトです。
+
+ +

メソッド

+ +

親インターフェイスである {{domxref("Event")}} からメソッドを継承しています。

+ +

例

+ +
// フォームの参照を得る
+
+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);
+});
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlformelement/formdata_event/index.html b/files/ja/web/api/htmlformelement/formdata_event/index.html new file mode 100644 index 0000000000..1d63da9889 --- /dev/null +++ b/files/ja/web/api/htmlformelement/formdata_event/index.html @@ -0,0 +1,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 +--- +
{{APIRef}}
+ +

formdata イベントは、フォームのデータを表すエントリーリストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターが呼び出されたときにも発行されます。

+ +

一般情報

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("FormDataEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onformdata")}}
+ +

例

+ +
// フォームの参照を得る
+
+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);
+});
+ +

onformdata 版はこのようになります。

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

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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