formデータの読み取り

formデータの読み取り

formタグで指定された内部のデータにアクセスするには、いくつかの方法があるので紹介していきます（図2）。

リスト1のように、「form name="f1"」「input name="text1"」としたとき、DOMツリーをたどってvalue属性（テキストフィールドの入力値）にアクセスするには、リスト2のように3通りの方法があります。

リスト2の（1）の「forms[0]」は、html内のformの数をゼロ番から数えて、何番目にあるかということを意味しています。複数formがある場合は、「forms[0]」「forms[1]」「forms[2]」…と番号が増えてきます。リスト2の（2）とリスト2の（3）は、formのname属性をキーにしてアクセスする方法で、こちらの方が、直感的で分かりやすいと思います。

今回は、前回学習した「getElementById」を使って、DOMツリーを意識しないで、直接テキストフィールドにアクセスしてみたいと思います（リスト3）。つまり、取得したいテキストフィールドにid属性：text1を指定して、「document.getElementById("text1")」とします。リスト3では、この値を、変数text1に代入して、以降はtext1で参照可能にしています。テキストフィールドのvalue属性を参照するには、「text1.value」で簡単に表現できるようになります。

リスト3で使っているalertは、JavaScriptでデータの確認によく使う方法で、閲覧したい変数などを、alertの括弧の中に入れて使用します。「alert(text1.value)」と指定すると、テキストフィールドに入っている文字を取得できたかどうか確認することができます（index4.html）。

入力データのチェックをしてみる

ユーザが入力したデータは、そのまま利用するのではなく通常は、入力値チェックを行います。ここでは、ユーザが入力したデータが数値がどうかのチェックをしてみましょう（index5.html）。

リスト4は、formのテキストフィールドを読み込む部分です。type属性がbuttonのinputタグに、onclickのイベントハンドラを設定して、readText()というJavaScript関数を呼び出すようにしています。これで、マウスでボタンを選択すると、readText()関数が実行されます。

イベントハンドラを使ってJavaScript関数を呼び出す仕組みは、前回の「第1回 そろそろ本気で学びませんか？」でも紹介していますので、参考にしてください。

では、「readText()」の中を見てみましょう（リスト5）。まず、前項目の説明で、「text1.value」には、ユーザが入力した値が入っています。この値を、「str_val」という変数に代入して、「str_val」の中の値をif文で調べるようにします。

if文の中では、数値かどうかのチェックをします。if文の最初の評価式は、「isNaN(str_val)」と「str_val==""」を「||」でつないでいます。「||」は、論理演算子と言って、「または」という意味になります。つまり、「A || B」と記述したら「AかBのどちらかが成り立つ」と言う意味になります。プログラミング的な表現をすると、「AとBのどちらかが真(true)」ならと言います。

今回の例では、「isNaN(str_val) 、または、str_val == ""が成り立つなら」と考えます。

「isNaN」は、数値かどうかを調べる関数で、数値でない場合は、真（true）、数値の場合は、偽（false）と判断します。後半の、「str_val==""」は、「str_val」の中に「空文字（何も入っていない）」かどうかを調べています。空文字を表現するときは、ダブルクオーテーション（"）を2つ連続させて書くか、シングルクオーテーション（'）を2つ連続して書きます。

以上をまとめると、ifの括弧の中は、「str_valが数字でないか、または、空文字のどちらかが成り立つ（真(true))場合」と表現できます。これが成り立つ場合は、「"数値以外の文字が入っています"」と表示されるようにします。

elseの部分は、「それ以外の場合は」と解釈します。つまり、「数値以外でない場合」とは、「数値の場合」になるので、「"数値のみです"」と表示するようにします。

結果を表示させる領域を、「id="message"」として作成したサンプルは、index6.htmlになります。

ここで紹介した論理演算子の例は、論理演算子のページを参照してください。また、数値かどうかのチェック方法には、いくつか方法がありますので各自研究してみてください。