1. ホーム
2. パソコン
3. javascript

【javascript】formData フォームの内容をjavascriptで制御する

投稿日 : 2022年07月12日 更新日 :

FormData とは？

formDataの中身を確認する

HTML

<form id="form">
  <span>名前 : </span><input type="text" name="name" id="name" /><br />
  <span>電話番号 : </span><input type="tel" name="tel" id="tel" /><br />
  <span>メールアドレス : </span
  ><input type="email" name="email" id="email" /><br />
</form>

javascript

const form = document.getElementById("form"); // フォーム
const submit = document.getElementById("submit"); // 送信ボタン
const result = document.querySelector(".result"); // 結果を表示させる要素
  
submit.addEventListener("click", () => {
  const formData = new FormData(form);  // new演算子でフォームの内容をformDataへ
  
  for (let value of formData.entries()) {
    result.innerHTML += value[0] + " : " + value[1] + "<br>";
  }
});

form

名前 :
電話番号 :
メールアドレス :

Click

結果

formDataに追加する

set() と append() の違い

set()

 const formData = new FormData(form);

formData.set("name", "Takahashi");
formData.set("tel", "090-1234-5678");
formData.set("tel", "080-9876-5432");
formData.set("email", "takahashi@xxxxx.com");
for (let value of formData.entries()) {
  console.log(value[0] + " : " + value[1]);
}

結果

append()

const formData = new FormData(form);

formData.append("name", "Takahashi");
formData.append("tel", "090-1234-5678");
formData.append("tel", "080-9876-5432");
formData.append("email", "takahashi@xxxxx.com");
for (let value of formData.entries()) {
  console.log(value[0] + " : " + value[1]);
}

参考

【javascript】GET送信されたデータを取得する方法

まとめ