[jQuery] フォームのリセットボタンを設置する

DBの値をWebフォームで編集させる際、jQueryで変更取消ボタンを設置したのでメモ

ラジオボタンとチェックボックスの周りでちょい苦戦した。
ページロードした後に以下で値のバックアップを取る。

$("select, textarea, input").each(function() { 
	if(this.type === 'radio' || this.type === 'checkbox') { // radio ボタン, checkbox用
		this._unchangeVal = $(this).attr("checked");
	} else {
		this._unchangeVal =  $(this).val();
	}
});

this.hoge で各domオブジェクト？ごとに値を保持しておくのがミソ。
ラジオボタンとチェックボックスでは各ボタン/ボックスごとの値保持しておいて、リセット時にそれぞれ保持しておいた値に戻してあげればいい。

attr 使ってるのはjQueryの古い環境だったから。最近のバージョンならprop使うべきかも。
リセットボタンのイベント中の処理は以下で。

$("select, textarea, input").each(function() { 
	if(this.type === 'radio' || this.type === 'checkbox') { // radio, checkbox 用
		$(this).attr("checked", this._unchangeVal);
	} else {
		$(this).val(this._unchangeVal);
	}
});

いじょー。