フォーム内のbuttonタグで送信されないようにする

formタグ内でフォーム送信ボタンとは別にbuttonタグを配置したい場合に、クリックでフォームを送信しないようにする方法をメモ。

サンプルコード

まずは対応前のデモです。
formタグ内でプライバシーポリシーの内容をモーダルで表示する想定で実装してみます。

<form action="./complete.html" method="post">
  <input type="text">
  <hr>
  <button data-modal_switch="policy">プライバシーポリシーを確認</button>
  <div data-modal_content="policy" class="modal">
    <div class="modal_content">プライバシーポリシーのサンプル</div>
  </div>
  <hr>
  <button>送信</button>
</form>

JavaScriptでモーダルの処理を追加します。

const modalSwitch = document.querySelectorAll('[data-modal_switch]');
for (let i = 0; i < modalSwitch.length; i++) {
  modalSwitch[i].addEventListener('click', function(e) {
    const target = this.getAttribute('data-modal_switch');
    document.querySelector('[data-modal_content = "' + target + '"]').classList.add('is-open');
  });
}

この場合、プライバシーの確認ボタンをクリックするとフォームの送信が行われてしまいます。
対応前のデモページ

対応方法は2種類あります。
まず1つ目は、モーダルボタンクリック時にフォームの送信を止める処理を追加する方法です。

const modalSwitch = document.querySelectorAll('[data-modal_switch]');
for (let i = 0; i < modalSwitch.length; i++) {
  modalSwitch[i].addEventListener('click', function(e) {
    e.preventDefault();
    const target = this.getAttribute('data-modal_switch');
    document.querySelector('[data-modal_content = "' + target + '"]').classList.add('is-open');
  });
}

これでフォームの送信がされないようになりました。
JavaScriptでの対応のデモページ

もう1つは、buttonタグのtype属性にbuttonを設定する方法です。

<form action="./complete.html" method="post">
  <input type="text">
  <hr>
  <button data-modal_switch="policy" type="button">プライバシーポリシーを確認</button>
  <div data-modal_content="policy" class="modal">
    <div class="modal_content">プライバシーポリシーのサンプル</div>
  </div>
  <hr>
  <button>送信</button>
</form>

buttonタグのtype属性は初期値がsubmitになっているため、未設定の場合はフォームの送信となってしまうようです。
type属性での対応のデモページ