Baseline Widely available
formdata
ã¤ãã³ãã¯ããã©ã¼ã ã®ãã¼ã¿ã表ãé
ç®ãªã¹ããæ§ç¯ãããå¾ã«çºè¡ããã¾ãããã®ã¤ãã³ãã¯ããã©ã¼ã ãéä¿¡ãããã¨ãã«çºè¡ããã¾ããã FormData()
ã³ã³ã¹ãã©ã¯ã¿ã¼ãå¼ã³åºãããã¨ãã«ãçºè¡ããã¾ãã
ãã®ã¤ãã³ãã¯ãã£ã³ã»ã«ä¸å¯ã§ããããªã³ã°ãã¾ããã
æ§æãã®ã¤ãã³ãåã addEventListener()
çã®ã¡ã½ããã§ä½¿ç¨ããããã¤ãã³ããã³ãã©ã¼ããããã£ã使ç¨ããããã¦ãã ããã
addEventListener("formdata", (event) => {});
onformdata = (event) => {};
ã¤ãã³ãå
FormDataEvent
ã§ãã Event
ããç¶æ¿ãã¦ãã¾ãã
親ã¤ã³ã¿ã¼ãã§ã¤ã¹ã§ãã Event
ããç¶æ¿ããããããã£ãããã¾ãã
FormDataEvent.formData
ã¤ãã³ããçºè¡ãããã¨ãã«ãã©ã¼ã ã«å«ã¾ãã¦ãããã¼ã¿ã表ã FormData
ãªãã¸ã§ã¯ããæ ¼ç´ããã¦ãã¾ãã
// ãã©ã¼ã ã®åç
§ãå¾ã
const formElem = document.querySelector("form");
// submit ãã³ãã©ã¼
formElem.addEventListener("submit", (e) => {
// ãã©ã¼ã ã®éä¿¡æãæ¢å®ã®åä½ãææ¢
e.preventDefault();
console.log(formElem.querySelector('input[name="field1"]')); // FOO
console.log(formElem.querySelector('input[name="field2"]')); // BAR
// FormData ãªãã¸ã§ã¯ããæ§ç¯ãã formdata ã¤ãã³ããçºè¡ããã
const formData = new FormData(formElem);
// formdata 㯠formdata ã¤ãã³ãã§å¤æ´ããã¾ãã
console.log(formData.get("field1")); // foo
console.log(formData.get("field2")); // bar
});
// ãã¼ã¿ãåãåãããã® formdata ãã³ãã©ã¼
formElem.addEventListener("formdata", (e) => {
console.log("formdata fired");
// ã¤ãã³ããªãã¸ã§ã¯ããããã©ã¼ã ãã¼ã¿ãåå¾ãã
const formData = e.formData;
// formdata ã¤ãã³ãã§ãã©ã¼ã ãã¼ã¿ã夿´ãã
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
});
onformdata
çã¯ãã®ããã«ãªãã¾ãã
formElem.onformdata = (e) => {
console.log("formdata fired");
// ãã©ã¼ã ãã¼ã¿ã夿´
const formData = e.formData;
formData.set("field1", formData.get("field1").toLowerCase());
formData.set("field2", formData.get("field2").toLowerCase());
};
仿§æ¸ ãã©ã¦ã¶ã¼ã®äºææ§ é¢é£æ
å ±
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4