フォームのresetについて
2014/07/02
<input type="reset">についてクリックしたら
初期値というかvalueは全部クリアされるものと思ってたんだけど、
そうじゃなかった。
a.phpからa.phpにフォーム情報を送った場合に、
postなりget情報があってそれを元にフォーム状態をいじってしまうと、
リセットを押しても全部がクリアされる訳では無いみたい。
例えばセレクトメニューで１～３があり、初期値は１だけど３を選んで
サブミットする。次のページでselectedを３にしておくような仕様を
入れた場合に、2を選択してリセットボタンを押しても3に戻ってしまう。
なので、ちゃんとというか初期値に戻したいのであれば、
javascriptやjQueryで操作する必要がありそう。
で、jQueryでやったとしてテキストボックスは思いつくけど、
ラジオボタン、セレクトメニュー、チェックボックスはすぐには
分からんかったんで調べて検証。
■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function reset(){
$("#text_id").val("初期値");
$("input[name='radio_name']").val(['1']); //valのところでつけたいところを決められる
$("#check_id").attr("checked", false); //チェックをつけたいときはtrue
$("#select_id").val("0");
}
</script>
<title>reset</title>
</head>
<body>
<h1>reset</h1>
<form action="./index.php" method="post">
<input type="text" value="初期値" name="text_name" id="text_id"><br>
<input type="radio" value="1" name="radio_name">ラジオボタン1<br>
<input type="radio" value="2" name="radio_name">ラジオボタン2<br>
<input type="checkbox" id="check_id" value="チェックボックス"><br>
<select name="select_name" id="select_id">
<option value="0">選択して下さい</option>
<option value="1">セレクトメニュー1</option>
<option value="2">セレクトメニュー2</option>
</select>
<input type="button" value="クリア" onClick="reset();">
</form>
</body>
</html>
他の選択肢としてはページのリロードをするとか。
関連記事
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
HTML内に動画(mp4ファイル)を埋め込んで配信する方法
Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...
-
-
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...
-
-
tableにスクロールバーを付ける
レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...