備忘録 
<input type="reset" value="クリア">

上記のボタンでもフォームの入力データが消えないときがある。どうやら、フォーム部品に入力した文字を消すだけで、valueに設定した値が表示しているものには効果ないらしい。つまり、例えば送信してバリデーションに引っかかり再び入力画面に戻った文字には効果がないって感じ。

その場合、jQueryで各部品のvalueを空にするというプログラムを構築するというものがよくネットに情報が上がっている。大抵は以下のようなもの。

$('form').find(':text').val("").end();

このサイトでは以下の方法で記録を残したのだが、それもなぜかダメだった。

$(".btn_clear").click(function(){
  $("#search_form").find('input[type=text], textarea').val("").end(); 
  $("#search_form").find(":checked").prop("checked",false).end().find(":selected").prop("selected", false);
})

しかし、意外に効果はなかった。jQueryのバージョンや、ブラウザによるものの影響だったりするのだろうか？

そして、結局以下の方法に変更し、無事対処することができた。

$("form input[type=text]").attr("value", "").end();
$("form textarea").text("").end();

inputはattrでvalueを指定し、空にすると言う方法。textareaはtext()で空にすると言う方法。もっとスッキリする方法があるんだろうけど、まずは動作することが最優先だから良しとしとこう。

inputはcheckboxとradioは別でクリアするほうが良いかも。

checkboxとradioはcheckしないとデータが飛ばないため、valueを消すのではなく、checkedを外す方法で。