【JavaScript】画面遷移なしでformをsubmitする（非同期通信）

HTMLでのformの送信

HTMLで何かしらの情報をPOST送信するときには、formを使うことが一般的です。

ただし、HTMLでのformの送信は画面遷移を伴うため、画面遷移せずにPOST送信をしたいときに、何の工夫もせずにHTMLのformで実装してしまうと想定の動作をしてくれません。

今回は、JavaScriptの非同期通信を利用して画面遷移なしでformのPOST送信をする方法について解説します。

非同期通信を利用して、画面遷移なしでformをsubmitする

サンプルコード

<form id="form" action="./test" method="post">
  <input type="text" value="some">
  <input type="submit" value="送信する" id="submit-button">
</form>
<script>
  const submitButton = document.querySelector('#submit-button');
  const form = document.querySelector('#form');
  form.addEventListener('submit', (event) => {
    event.stopPropagation();
    event.preventDefault();
    const formData = new formData(form);
    const options = {
      method: 'POST',
      body: formData,
    }
    const url = form.getAttribute('action');
    fetch(url, options);
  });
</script>

①submitイベントをキャンセルする or <a>タグなどを利用する

stopPropagation()とpreventDefault()を使って、formがsubmitされる時のイベントをキャンセルすることで、ページ遷移の動作をなくすことができます。

const form = document.querySelector('#form');
form.addEventListener('submit', (event) => {
  event.stopPropagation();
  event.preventDefault();
  ~

また、送信ボタンのinput[type=”submit”]を、formを送信しない<a>タグなどで再現することでイベントのキャンセルをしなくてもformが送信されない状態を作ることもできます。

その場合には、<a>タグなどで再現した送信ボタンにclickイベントを追加するようにしましょう。

<form id="form" action="./test" method="post">
  <input type="text" value="some">
  <!-- formを送信しない<a>タグを使用 -->
  <a id="submit-button">送信する</a>
</form>
<script>
  const submitButton = document.querySelector('#submit-button');
  const form = document.querySelector('#form');
  // <a>タグにclickイベントを追加する
  submitButton.addEventListener('submit', (event) => {
  ~

②送信先URLや送信したい情報を揃える

formをページ遷移なしで送信する場合には、送信するformの送信先URLやメソッドの種類などのオプションが必要になります。

~
// formDataオブジェクトを生成
const formData = new formData(form);
const options = {
  method: 'POST', // メソッドの種類
  body: formData, // 送信する内容
}
// 送信先URLをformのaction属性から取得
const url = form.getAttribute('action');
~

③Fetch APIを使ってPOST送信を行う

②であらかじめ変数に格納しておいた情報を使って、JavaScriptのFetch APIで非同期通信を行います。

~
fetch(url, options);
~

一方的に送信するだけでなく、正しく送信されたかなどを確認したい場合にはasync/awaitを利用することで非同期処理を簡潔に記述することができます。

const form = document.querySelector('#form');
form.addEventListener('submit', async (event) => {
  event.stopPropagation();
  event.preventDefault();
  const formData = new formData(form);
  const options = {
    method: 'POST',
    body: formData,
  }
  const url = form.getAttribute('action');
  const res = await fetch(url, options);
  if(res.ok) {
    // 通信が成功した時の処理
  } else {
    // 通信が失敗した時の処理
  }
});

まとめ

JavaScriptのFetch APIを使って非同期通信を行うことで、ページ遷移なしでformを送信することができます。

使うことの割と多いテクニックであるため、覚えておくと役に立ちます。