resetオブジェクト
resetオブジェクトはリセットボタンの情報を提供したり、リセットボタンの設定や操作を行うオブジェクトです。リセットボタンは入力した内容をリセットして、初期状態に戻すためのボタンです。
リセットボタンの値を取得する方法
リセットボタンの値を取得する方法は、フォーム内のinputタグのname属性に名前を指定することにより以下の構文でリセットボタン名を取得することが可能となります。
document.フォーム名.リセットボタン名.value
以下のサンプルではフォームのname属性を指定して、リセットボタン名を表示しています。
<html<html>
<head>
<title>JavaScript reset</title>
<script type="text/javascript">
function dispReset(){
var rsName = document.fm.reset1.value;
alert('クリックしたリセットボタン名は｢' + rsName + '｣です' );
}
</script>
</head>
<body>
<form name="fm">
フォーム内のリセットボタン名を表示<br>
<input type="reset" name="reset1" value="リセット１" onclick="dispReset()">
</form>
</body>
</html>
前述の方法以外にelements配列を使用してindex番号を指定することにより取得する方法もあります。index番号はフォーム内の各要素の宣言順に0から順番に割り当てられます。
なお、フォーム内の要素数はlengthプロパティにより取得できるので、lengthプロパティにより数を取得してfor文を使用して順次取得します。
document.フォーム名.elements[index番号].value
以下のサンプルではelements配列を使用してリセットボタン名を表示しています。
<html>
<head>
<title>JavaScript reset</title>
<script>
function dispReset(){
var f = document.fm;
for(var i = 0 ; i < f.elements.length ; i++){
if(f.elements[i].type=='reset'){
alert(i + '番目のリセットボタン名は'
+ f.elements[i].value + 'です' );
}
}
}
</script>
</head>
<body>
<form name="fm">
フォーム内のリセットボタン名を表示<br>
<input type="reset" name="reset1" value="リセット１">
<input type="reset" name="reset2" value="リセット２">
<input type="reset" name="reset3" value="リセット３">
<input type="reset" name="reset4" value="リセット４">
<input type="reset" name="reset5" value="リセット５">
<input type="button" value="確認" onclick="dispReset()">
</form>
</body>
</html>
プロパティの設定方法
document.フォーム名.リセットボタン名.property
document.フォーム名.elements[index番号].property
以下はresetオブジェクトのプロパティの一覧です。
| プロパティ名 | 内容 |
|---|---|
| name | オブジェクト名 |
| value | オブジェクト内の値 |
| type | オブジェクトのタイプ |
メッソッドの設定方法
document.フォーム名.リセットボタン名.method()
document.フォーム名.elements[index番号].method()
以下はresetオブジェクトのメソッドの一覧です。
| メソッド名 | 内容 |
|---|---|
| click() | クリック |
| toString() | オブジェクトを文字列に変える |
| blur() | フォーカスを移動する |
| focus() | フォーカスを与える |
| valueOf() | オブジェクトの値を返す |
| handleEvent | イベント取扱者を特定する |
| toSource | オブジェクトの値を文字列で返す |
| 関連メンバ | |
|---|---|
| Text | テキストボックス |
| Textarea | テキストエリア |
| Select | 選択・リストボックス |
| Checkbox | チェックボックス |
| Radio | ラジオボタン |
| Buttom | ボタン |
| Submit | 送信ボタン |
| Hidden | 隠しフィールド |
| Password | パスワード入力ボックス |
| File | ファイル選択ボックス |