カテゴリー: HTML5

この前、酔って携帯を無くし、必死こいて探しましたが見つかりませんでした。
そしたらなんと、自宅の冷凍庫に冷凍保存してました。

どうも、こんなPONKOTSUです。(反省します)

今回は久しぶりにフロントエンドについてかきます。

htmlのinput[type=“reset”]は
初期値があれば、その初期値にリセットされる。

※jquery,jsのreset()も同様。

フォームなんかで、
選択済みのチェックボックスや入力済みの入力値を
\ 一括でリセットできるボタンがほしい /
って時があると思います。

そんなとき、こんなコード書くと思います。
（input[type=”reset”]というのがあるのをこの時知りました。）
htmlだったら…

  <input type="reset" value="リセットボタン">

jsだったら…

<button id="js_reset">jsのreset()</button>
<script>
 var js_rese_btn = document.getElementById('js_reset');

 js_rese_btn.addEventListener("click", function(){
   document.form.reset()
 }, false); 
</script>

これで、リセットはできるんです。
ただ、私の想定と違う時がありました。

それは、、、
リセット対象のformにvalueやselected,checkedなどの
初期値を設定している時です。
→値が「空」になるわけではなく、設定した初期値になる

デモはこちら。
https://jsfiddle.net/ocq0auwn/12/

ソースは感じ

<form action="#" name="form1">
  <!-- 「キン肉太郎」と入力して、リセットボタンを押すと、「山田孝之」になる。--> 名前：
  <input class="input_text_name" type="text" value="山田孝之" >
  飲んだお酒：
  <select class="select_sake">
    <option value="">選択してください</option>
    <option value="1">ビール</option>
    <option value="2">ハイボール</option>
    <option selected="selected" value="3">飫肥杉</option>
    <option value="4">もえしゃん</option>
    <option value="5">カプモーニ</option>
  </select>
  <input class="check_sake" checked="checked" type="checkbox" >お酒はほどほどにします。
  <input type="reset" value="htmlのリセット">

  <button class="jquery_reset">jQueryのreset()</button>
  <button id="js_reset">jsのreset()</button>
  <button class="jquery_reset_perfect">完全リセットしたい時に押すボタン(jQuery)</button>

jsはこんな感じ

/* JS */
var js_rese_btn = document.getElementById('js_reset');
js_rese_btn.addEventListener("click", function(){
  document.form1.reset()
}, false);

/* jQuery */
$('.jquery_reset').on('click', function(){
  $('form').get(0).reset();
  //document.form1.reset(); //jsだとこれ
}); 

//完全リセット
$('.jquery_reset_perfect').on('click', function(){
  $('.select_sake').find('option:selected').prop('selected', false);
  $('.input_text_name').val('');
  $('.check_sake').prop('checked', false);
});