フォームの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のarticle
コーダーさんから渡されたソースに<article>という 記述があり ...
-
HTML5のカレンダーピッカーについて(input type="date")
とあるシステムのフォーム部分を改修する案件があった為、内容を確認していると日付入 ...
-
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...
-
input type="number"がFirefoxやSafariで正常に動作しない
input type="number"を設置したFormがFirefoxやiPh ...
-
mp3ファイルのアップロードと再生方法
mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...