フォームの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>
他の選択肢としてはページのリロードをするとか。
関連記事
-
-
HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法
あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指 ...
-
-
JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について
JavaScriptやCSSをCDN呼び出しする際、<script> ...
-
-
HTML内に動画(mp4ファイル)を埋め込んで配信する方法
Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...
-
-
スマホでフォームの画像アップロード部分でカメラを起動させる方法
formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...
-
-
HTMLのformでオートコンプリートを無効にする
WordPressでタグ入力はオートコンプリートが効かず、他のフォームではオート ...