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)毎に、「クリア=一番最初の要素をクリック」させるようにしました。

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