この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Webプログラミング講座初級 第四回 スクリプトでフォーム部品を操作する~テキストボックス編~

今回はフォームについてです。フォームは検索する時や、なにかを選択する時に使いますよね。
いわば、ユーザーの選択によって出力を制御するので一種のプログラムです。

フォームは様々なプログラムで利用されます。サーバーにデータを送ったりする時にも利用されます。
もちろんJavaScript(jQuery)でも多用されます。

今回はjQueryを使ってフォームを操作する方法の基本を学びます。
因みにjQueryを使わないとどうなるかというと、非常に長ったらしいコードを書く必要があり、面倒なのでした。jQueryのお陰で誰でも簡単にフォームのパーツにアクセスができるようになっています。

まずフォームパーツ(部品)の種類ですが、大きく分けて9種類あります。

[note]・ボタン
・テキストボックス
・テキストエリア
・プルダウンメニュー
・リスト
・ラジオボタン
・チェックボックス
・ファイルアップロード
・イメージ
・隠しフォーム[/note]

この他にもまだあります。

例えば、計算機を作る場合は、数字の書かれたボタンをクリックしたら、テキストボックスに表示するようにします。フォームはゲームを作る時も多用されるので避けては通れないのです。

では、まず一番簡単なテキストボックスボタンからチャレンジしてみましょう。

以下の様なテキストボックス2つとボタンが1つあるとします。

テスト : <input id="test" type="text"><br />
テスト2 : <input id="test2" type="text"><br />

<input id="run" type="button" value="実行"><br />

テキストボックスに何か文字を入力したらボタンを押します。すると隣のテキストボックスに入力した文字列が表示され、繰り返される度に文字が追加されていくサンプルです。

ポイントはなにかというと「セレクタ」です。フォームのパーツにはそれぞれ「ID」が振られています。「ID」を指定することで、「何を」が決定します。

「何を」が決まったので、「どうする?」の部分は「値を取得する」なので「.val()」というメソッドを利用します。
ここでメソッドという新しい言葉が出てきたので説明します。

メソッドというのは「手段」を表すもので、通常は「hoge()」のように最後に括弧がつきます。
手段ということなので、ある機能を利用することができます。
この機能についてはjQueryから提供されているものなので決まっています。

「.val()」というのは、値を取得する、という機能(メソッド)です。「.」のドットは区切り文字です。

例えば、IDが「test」というテキストボックスがあったとしたら、その値を取得して変数に格納するためには以下のようにします。

[note]$test = $( “#test” ).val();[/note]

セレクタを囲む二重引用符は一重引用符であっても構いません。
因みにセレクタの「$( “#test” )」の部分の「$(ドル)」記号は、「jQuery」の省略形です。
略さないで書くとこうなります。

[note]$test = jQuery( “#test” ).val();[/note]

「jQuery」は省略して「$」にするよ、という別名が定義されているので、このように省略できたりします。意味としては、「jQueryの機能を利用するよ」という感じです。

jQueryを使わないと以下の様な感じになります。

[note]$test = document.form1.test.value;[/note]

長いですね。

話は戻って、フォームのパーツの値は取得と設定の二種類の操作ができます。
取得は「GET」で設定は「SET」と置き換えると分かりやすいですね。インプットとアウトプットと考えてもいいです。

今、テキストボックスの値をGET(取得)したので、隣のテキストボックスにSET(設定)してあげればいいわけです。値を設定する場合は以下のようにします。

[note]jQuery( “#test2” ).val( $test );[/note]

「.val()」の括弧に「値」引数として指定すると、その値が設定されます。
引数というのはメソッドに渡す値のことを指します。通常は括弧内に指定します。
引数は自販機で言えばコイン投入口で、「=」が商品の取り出し口というイメージです。

ここで分かることは「.val()」というメソッドとは引数が指定されていなければ値を取得して、指定してあればその値で置き換える、ということです。
簡単ですね。

このようにします。

関連記事