Fetch APIでフォームに入力されたデータを送信する

Fetch APIでフォームに入力された内容をサーバーへ送信する

ページにあるフォームで入力された内容をサーバーに送信するときは、Fetch APIとFormDataオブジェクトを組み合わせて使います。

フォームの入力値をセットしたFormDataオブジェクトを作成し、Fetch APIでサーバーにリクエスト（要求）を送信するときに「body」としてパラメータで渡すとフォームの入力された内容を送信することができます。

以下の例では、ページに5つの入力項目「氏名」「性別」「年齢」「お問い合わせ内容」「個人情報保護方針」があるお問い合わせフォームで入力されたデータをサーバーに送信します。
例のため、ここでは入力項目の値はあらかじめvalue属性やchecked属性で指定してしまいます。

HTML コード例

<form method="post" action="">
  <div>
    <label for="input_name">氏名</label>
    <input id="input_name" type="text" name="input_name" value="佐藤 花子">
  </div>
  <div>
    <label for="gender">性別</label>
    <label for="input_male">男性<input id="input_male" type="radio" name="input_gender" value="1"></label>
    <label for="input_female">女性<input id="input_female" type="radio" name="input_gender" value="2" checked></label>
    <label for="input_none">無回答<input id="input_none" type="radio" name="input_gender" value="3"></label>
  </div>
  <div>
    <label for="input_age">年齢：</label>
    <select id="input_age" name="input_age">
      <option value="1">〜19歳</option>
      <option value="2">20歳〜29歳</option>
      <option value="3" selected>30歳〜39歳</option>
      <option value="4">40歳〜49歳</option>
      <option value="5">50歳〜59歳</option>
      <option value="6">60歳〜</option>
    </select>
  </div>
  <div>
    <label for="input_content">お問い合わせ内容：</label>
    <textarea id="input_content" name="input_content">フォームの送信テスト</textarea>
  </div>
  <div>
    <p>個人情報保護方針に同意いただける場合はチェックをつけてください。</p>
    <label for="input_agree"><input id="input_agree" type="checkbox" name="input_agree" value="1" checked>個人情報保護方針に同意する</label>
  </div>
  <input type="submit" id="btn_submit" name="btn_submit" value="送信">
</form>

JavaScriptのコードは以下のようになります。
「送信」ボタンが押されたときに、フォームから入力値を取得してFormDataオブジェクトにデータをセットし、Fetch APIでPOSTメソッドによるデータ送信を行います。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

  // (1) 送信ボタンのHTMLを取得
  const btn_submit = document.getElementById("btn_submit");

  // (2) FormDataオブジェクトの初期化
  const fd = new FormData();

  btn_submit.addEventListener('click', (e)=> {
    e.preventDefault();

    // (3) フォーム入力欄のHTMLを取得
    const input_name = document.querySelector('input[name=input_name]');
    const input_gender = document.querySelector('input[name=input_gender]:checked');
    const input_age = document.querySelector('select[name=input_age]');
    const input_content = document.querySelector('textarea[name=input_content]');
    const input_agree = document.querySelector('input[name=input_agree]:checked');

    // (4) FormDataオブジェクトにデータをセット
    fd.append('name', input_name.value);
    fd.append('age', input_age.value);
    fd.append('content', input_content.value);

    if( input_gender ) {
      fd.append('gender', input_gender.value);
    }

    if( input_agree ) {
      fd.append('agree', input_agree.value);
    }

    // (5) フォームの入力値を送信
    fetch( 'contact.php', {
      method: 'POST',
      body: fd
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });
  });

});

(1)では、送信ボタンのHTMLをid属性から取得しています。
このHTMLに対して「クリック」されたときに処理を実行するイベントリスナーを設定していきます。
この処理の中でフォームの入力値を取得したり、Fetch APIによるデータの送信を一通り行います。

(2)はフォームの入力項目をセットするためのFormDataオブジェクトを初期化します。

続いて(3)ではフォーム内にある各入力欄のHTMLを5つ取得します。
「性別」「個人情報保護方針に同意する」など、ラジオボタンやチェックボックスになっているinput要素については、チェック状態のchecked属性がある要素のみを取得しているところもポイントです。

(4)では先ほど取得した入力欄のHTMLのvalue属性から入力値を取得して、FormDataオブジェクトのappendメソッドで入力値をセットしていきます。
ラジオボタンやチェックボックスについては、選択されていない状態だとvalue属性を参照できないため、checked属性のあるHTMLが取得できているかif文で確認しておく必要があります。

ちなみにデータの受け取り先であるサーバー側のシステムでは、FormDataオブジェクトのappendメソッドで第1パラメータに指定したラベルからデータを参照することができます。
例えばPHP の場合は、POSTメソッドで受け取ったデータは以下のようにして参照することができます。

PHP コード例

// 名前
$name = $_POST['name'];

// 性別
$gender = $_POST['gender'];

// 年齢
$age = $_POST['age'];

// お問い合わせ内容
$content = $_POST['content'];

// 個人情報保護方針に同意する
$agree = $_POST['agree'];

ここまでで、FormDataオブジェクトにフォームの入力値を全てセットして送信準備が整いました。
続いて、(5)でFetch APIよりデータを送信します。

今回は送信先のURLを「contact.php」と指定して、POSTメソッドによる送信を行います。
ここで、「body」にFormDataオブジェクトを指定します。
これだけで、先ほど指定した送信先にフォームの入力値を渡すことができます。

以上がフォームに入力されたデータをFetch APIを使って送信する方法でした。