MENU

htmlのリセットボタンは「ページ読み込み時の」初期値に戻すだけ

フォームのリセットボタン(type=”reset”)は
押したとき「ページが読み込まれたときの」入力状態に戻すだけで、
「全てクリア」する仕様ではありませんでした。

サーバーサイドであらかじめ値をいれてあったりすると、その値に戻す。
文字通り「リセット」です。

「全てクリア」するにはJavascript等で一つ一つ空にする設定をする必要があるみたいです。

$('.reset').on('click', function(e){
  e.preventDefault();
  $('form')
    .find('[type=hidden]').val('').end()
    .find('[type=text], [type=number]').val('').end()
    .find(':checked').prop('checked', false).end()
    .find('.c-radio-group').each(function () {
      $(this).find('[type=radio]').eq(0).click();
    });
});

ラジオボタンやチェックボックスなどは、
サーバーサイドでcheckedの位置を変えられてたりするので、
今回は.c-radio-group(ラジオボタンの兄弟をまとめるdiv)毎に、「クリア=一番最初の要素をクリック」させるようにしました。

よかったらシェアしてください!
もくじ
閉じる