フォームの部品を利用する

HTMLフォームは、javaScriptからみれば、formオブジェクトです。フォームのGUI部品であるbuttonオブジェクト、ラジオボタンはradioオブジェクト、テキストフィールドはtextオブジェクトです。フォームをうまく利用することで、javaScriptでさまざまなものが作成できます。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>入力されたフォームの値を取得する</title>
   
</head>
<body>
 <form><p>
     男性：<input type="radio" name="sex" checked>
     女性：<input type="radio" name="sex"><br>
     身長：<input type="text" name="height">cm<br>
     <input type="button" value="計算" name="calc"
            onclick="stdWeight(this.form)"><br>
     標準体重：<input type="text" name="weight">kg
</p></form>
    
<script>
function stdWeight(inputForm){
    var height,weight;
    
    //フォームに入力された身長を取得して、
    //数値に変換して変数heightに代入する
    height = Number( inputForm.height.value );
    
    if( inputForm.sex[0].checked ){
        //男性のラジオボタンにチェック入っている場合
        weight = ( height - 80 ) * 0.7;
    }else{
        //女性のラジオボタンにチェック入っている場合
        weight = ( height - 70 ) * 0.6;        
    }
    
    //上記の計算結果をフォームの標準体重の箇所に値を代入する。
    inputForm.weight.value = weight;
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>入力されたフォームの値を取得する</title>

</head>

<body>

男性：<input type="radio" name="sex" checked>

女性：<input type="radio" name="sex"><br>

身長：<input type="text" name="height">cm<br>

<input type="button" value="計算" name="calc"

onclick="stdWeight(this.form)"><br>

標準体重：<input type="text" name="weight">kg

</p></form>

function stdWeight(inputForm){

var height,weight;

//フォームに入力された身長を取得して、

//数値に変換して変数heightに代入する

height = Number( inputForm.height.value );

if( inputForm.sex[0].checked ){

//男性のラジオボタンにチェック入っている場合

weight = ( height - 80 ) * 0.7;

}else{

//女性のラジオボタンにチェック入っている場合

weight = ( height - 70 ) * 0.6;

}

//上記の計算結果をフォームの標準体重の箇所に値を代入する。

inputForm.weight.value = weight;

}

</script>

</body>

</html>

フォーム部品へのアクセス方法

前々回紹介したオブジェクトの階層図をみると分かるように、フォーム部品はformオブジェクトの下にあります。formオブジェクトはdocumentオブジェクトの下の階層です。各要素はHTMLのname属性で指定した名前でアクセスできます。

今回のサンプルプログラムだと、inputFormという名前のフォームのheightという名前のテキストバックス(textオブジェクト)にある、valueプロパティには以下のようにアクセスできます。

　document.inputForm.height.value

1	document.inputForm.height.value

このvalueは、テキストボックス内の文字列を表すプロパティです。
valueプロパティを読みだせば、テキストボックスの文字列を取り出せます。
また、値を代入すれば、テキストボックス内の文字列を変更できます。

自分自身を表すthisプロパティ

     &lt;input type="button" value="計算" name="calc"
            onclick="stdWeight(this.form)"&gt;

1 2	<input type="button" value="計算" name="calc" onclick="stdWeight(this.form)">

stdWeight関数の引数にthis.formと指定していますが、formの部品には、自分自身を示す特殊なプロパティthisが用意されています。例えば、ボタンをイベントハンドラで書いた場合、「this」はボタン自身を表します。さらにボタンが属するformオブジェクトは「this.form」で参照できます。

なぜ引数に「this.form」を渡すのか。そうすることにより、呼び出された関数は「formの各部品にフォームの階層からアクセスできる」からです。stdWeight関数の先頭では、次のように「inputForm.height.value」という形式でテキストボックスの値にアクセスしています。

もし、引数に「this.form」を渡さない場合は、「document.inputForm.height.value」という感じで、documentオブジェクトの階層から指定しなければならなくなり、プログラムが読みにくくなります。

ラジオボタンを使う

フォームのラジオボタンは、javaScriptではradioオブジェクトして扱います。１つのグループ(同じ「name」属性)のラジオボタンの最初の要素の添え字を０とする配列してみなします。

　男性：<input type="radio" name="sex" checked>
　女性：<input type="radio" name="sex"><br>

1 2	男性：<input type="radio" name="sex" checked> 　女性：<input type="radio" name="sex"><br>

チェックが付いているかどうかは、checkedプロパティで確認できます。
選択されていればtrue、違うならfalseです。下記で男性にチェックが入っているか判定しています。

    if( inputForm.sex[0].checked ){

1	if( inputForm.sex[0].checked ){