フォームのリセットボタンにフィールドの入力値をクリアする挙動を追加するスクリプト

form-reset-button.js

(function (){
  'use strict';

  init();

  /**
   * ページ読み込み時処理
   */
  function init() {
    addClearBehavior();
  }

  /**
   * フォームのリセットボタンにフィールドの入力値を消すふるまいを追加する
   *
   * input[type="reset"] はデフォルトではページ描画時の状態に戻すふるまいをするが
   * これは直感的ではないので空にするふるまいに変更しています
   */
  function addClearBehavior() {
    const targetFormClass = '.target-form';
    const mainContent = document.querySelectorAll(targetFormClass);

    mainContent.forEach(function (elem) {
      const reset = elem.querySelector('input[type="reset"]');
      if (reset) {
        reset.addEventListener('click', function (event) {
          event.preventDefault();
          clearForm(event.target.form);
        });
      }
    });
  }

  /**
   * フォームの入力をリセットする
   *
   * - テキスト系のフィールドは空にする
   * - 選択系のフィールドは未選択にする
   */
  function clearForm(form) {
    const textInputs = form.querySelectorAll('input[type="text"], select, textarea');
    const radios = form.querySelectorAll('input[type="radio"]');
    const checkboxes = form.querySelectorAll('input[type="checkbox"]');

    if (textInputs.length) {
      textInputs.forEach(function (elem) {
        elem.value = '';
      });
    }
    if (radios.length) {
      radios.forEach(function (elem) {
        elem.selected = false;
      });
    }
    if (checkboxes.length) {
      checkboxes.forEach(function (elem) {
        elem.checked = false;
      });
    }
  }

})();