この章ではFormオブジェクトについて説明します。
FormオブジェクトはHTMLのフォームのデータを取得するなど、フォームにアクセスするためのオブジェクトです。
フォームの入力データが正しいかどうかをチェックしたりすることが出来ます。
FormオブジェクトはHTMLのformの要素1つ1つをオブジェクトとして扱います。
具体的にformオブジェクトとはButtonオブジェクト、Textオブジェクト,FileUploadオブジェクト,Submitオブジェクト,Resetオブジェクト, Radioオブジェクト,Checkboxオブジェクト,Buttonオブジェクト,Selectオブジェクト、Textareaオブジェクト、Passwordオブジェクトのことを言います。
では例をみてみましょう。
基本構文は以下の通りです。
構文のフォームの名前と要素の名前はname属性の値を指定してください。
これでform内の
これでフォームの指定箇所までアクセスできましたが、この箇所から入力されたデータを得るためにはvalueプロパティが必要です。
入力した値を取得するには
つまりこの例では
フォームのデータを取得するには
以下のようなフォームがあるとすると以下のような番号で
「番号による指定」を行います。
0番目のフォームforms[0]の
0番目のエレメントelements[0]
は以下の記述です。
0番目のフォームforms[0]の
1番目のエレメントelements[1]
は以下の記述です。
0番目のフォームforms[0]の
2番目のエレメントelements[2]
は以下の記述です。
では例の説明に戻ります。
警告が出た後はfocusメソッドによって指定した入力欄にフォーカス(カーソル)を合わせます。
focusメソッドは「名前が未入力です」というダイアログボックスのOKをクリックした後に次のようにカーソルを入力欄に合わせてくれます。
以下の例で補足をします。
このfalseがどこに返されるのかと言いますと
falseが返されることでイベントの実行を中止にすることが出来ます(この例ではonsubmitの実行を中止します)。
では今度は次の例のようにformタブの中のonsubmit属性の値からreturnを外してみましょう。
さらに
名前がカラのときに
つまり、returnを付けないとイベントの実行を中止にすることが出来ません。
以下の箇所に「return」を付けると「名前が未入力です」のダイアログボックスの中のOKをクリックしても
次は「ラジオボタン」が選択されているかどうかをチェックする方法とそのチェックされた値を出力する方法について説明します。
以下の箇所ではsubmitボタンを押すとsample関数が呼び出されます。
name属性の値はabcですべて同じ名前ですが、ラジオボタンのように複数の同じ要素名がある場合はその要素は配列になります。
ですのでlengthで配列の要素数を取得できます。
選択されている場合は true を、選択されていない場合は false を返します。
valueを付けることで選択された要素を取得できます。
結果は以下の通りです。
次は「チェックボックス」にチェックが入っているかの確認する方法について説明します。
では例をみてみましょう。
次はフォームのセレクトボックスの未選択をチェックする方法について説明します。
では例をみてみましょう。
セレクトボックスでの未選択を確認するにはselectedIndexプロパティを使います。
つまり、猫が1,犬が2,タヌキが3を返します。
未選択の場合は
次はselectedIndexを使って、セレクトボックスで選択されたテキスト部分のデータを取得する方法について説明します。
例では以下の箇所です(スペースの都合で複数行で書いています)。
「猫ちゃん」
「犬ちゃん」
「タヌキちゃん」
その中の選択した項目がアラートで表示されます。
また、以下のように先ほどの構文のtextの代わりに
「猫」
「犬」
「タヌキ」
ではこの例の表示結果をみてみましょう。
何かを選択すると選択した項目がアラートで表示されます。
結果は以下の通りです。
セレクトメニューの場合はselectedで確認しますが、ラジオボタンやチェックボックスはcheckedで確認するので気を付けてください。
以下の箇所で選択項目を出力します。
次はthisを関数に渡す例について説明します。
いままではイベント設定時には以下のように関数の引数はカラでした。
今回は「this」を引数として渡します。
この例のthisはイベントが発生している場所であるformを指していることになります。
では例を見てみましょう。
sampleの引数のthisは
今までは
つまり
先ほども書きましたが、thisはイベントが発生している場所であるformを指していることになります。