javascript で、form の内容をリセットする処理

通常の単なるHTML上のリセットボタンだと、checked などがもともとついているデータを変更することはできません。状況としては、データを呼び出したときにすべてデータをリセットしたいときです。
やりたいことは、フォーム上のradio,checkbox,text,textarea の内容をjavascript で、選んで空白にする必要があります。そのようなjavascript のコードのサンプルを探しています。hidden や、submit の内容はクリヤしたくありません。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/06/13 15:37:13
  • 終了:2011/06/20 15:40:20

回答(1件)

id:dothan No.1

どたん回答回数145ベストアンサー獲得回数252011/06/13 16:30:54

ポイント200pt

こんな感じでいかがでしょう。

「消去」ボタンをクリックしてみてください。

動きがわかりやすいようにベタに書いてあります。

実際にはラジオボタンやチェックボタンを配列で生成するようなJavaScriptを書いた方がスマートです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" language="javascript">
<!--
function hoge() {
    //ラジオボタンをクリアする
    document.getElementById("rad1").checked=false;
    document.getElementById("rad2").checked=false;
    document.getElementById("rad3").checked=false;
    //チェックボックスをクリアする
    document.getElementById("chk1").checked=false;
    document.getElementById("chk2").checked=false;
    document.getElementById("chk3").checked=false;
    //テキストボックスをクリアする
    document.getElementById("item3").value="";
    //テキストエリアをクリアする
    document.getElementById("item4").value="";
}
-->
</script>
</head>
<form>
<input type="radio" name="item1" id="rad1">A<br />
<input type="radio" name="item1" id="rad2" checked>B<br />
<input type="radio" name="item1" id="rad3">C<br />
<input type="checkbox" name="item21" id="chk1">1<br />
<input type="checkbox" name="item22" id="chk2" checked>2<br />
<input type="checkbox" name="item23" id="chk3" checked>3<br />
<input type="text" id="item3" value="あいうえお" /><br />
<textarea id="item4">アイウエオ</textarea><br />
<input type="reset" /> 
<input type="button" id="clear" value="消去" onClick="hoge()" />
</form>
</div>

</body>
</html>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません