セレクトメニューやラジオボタンで選択させ、ある項目を選択した場合には、次の項目を無効（入力・選択不可）にしたいことはあるでしょう。次の例を試してみてください。
セレクトメニューで「無効」を選択すると、隣のテキストボックスはグレーになり入力できなくなりますね。そして、セレクトメニューを「有効」に戻せば、テキストボックスは白色に変わり入力できるようになります。これは、JavaScript と CSS を組み合わせて実現します。それでは、実現方法をご紹介しますね。
まずは、上のフォームの HTML を見てください。次のようになっています。
<body onload="selectChange()">
・
・
・
<form name="form1">
<select size="1" name="select1" onchange="selectChange()">
<option value="1">有効</option>
<option value="0">無効</option>
</select>
<input type="text" name="text1">
<input type="submit" value="送信">
</form>
HTML で重要なのは、赤字で示された各タグの名前です。form タグ内にある form1、select タグ内にある select1、input タグ内にある text1 のことです。これらの名前は何でもいいのですが、後ほどご説明する JavaScript でフォームを制御するためのキーワードとなります。そしてもう一つ重要なのは、select タグ内にある onchange="selectChange()" です。これは、セレクトメニューで選択した際に、JavaScript の関数 selectChange() を起動しなさいという命令文です。この関数の名前も、何でも結構ですが、同じ名前で、JavaScript の関数が定義されていないとエラーが出ますので、注意してください。最後に、body タグ内に、onload="selectChange()" を忘れずに入れておく必要がありますので、あわせてご注意ください。これは、ブラウザーが HTML を読み込んだ際に JavaScript 関数 selectChange() を実行するための命令文です。
では、肝心の JavaScript 関数 selectChange() をご紹介しましょう。haed タグ内に次の JavaScript を記述します。
1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| 14| |
<SCRIPT LANGUAGE="JavaScript">
<!--
function selectChange() {
var selectedNum = document.form1.select1.selectedIndex;
if(selectedNum == 0) {
document.form1.text1.disabled = false;
document.form1.text1.style.backgroundColor='#FFFFFF';
} else {
document.form1.text1.disabled = true;
document.form1.text1.style.backgroundColor='#D4D0C8';
}
}
// -->
</SCRIPT>
|
■ 3 行目： function selectChange() {
JavaScript の関数の宣言です。関数名は、ここでは、selectChange() としておりますが、特段、この名前でなくてはいけないわけではありません。ただし、HTML の body タグと select タグで呼び出すときの名前と同じにする必要がありますので、ご注意ください。
■ 4 行目： var selectedNum = document.form1.select1.selectedIndex;
document.form1.select1 は、このドキュメント（document）内の form1 と名づけられたフォーム内の select1 と名づけられたセレクトメニューという意味です。selectIndex は、セレクトメニューで何番目の項目が選択されているかを取得します。これで取得された番号を変数 selectedNum に格納します。尚、selectIndex は、0 から数えます。つまり、セレクトメニューの一番上の項目が選択されている場合には、0 となります。
■ 5 行目： if(selectedNum == 0) {
セレクトメニューの 0 番目、つまり「有効」が選択された場合の条件式です。次の 6 行目と 7 行目が実行されます。
■ 6 行目： document.form1.text1.disabled = false;
disabled は、フォームオブジェクトを無効にするプロパティーです。true をセットすると無効に、false をセットすると有効になります。ここでは、テキストボックスを有効（入力可能）の状態にします。これだけでは色は変わりません。
■ 7 行目： document.form1.text1.style.backgroundColor='#FFFFFF';
テキストボックスの色を白色（#FFFFFF）に変更します。
■ 8 行目： } else {
5 行目の条件に当てはまらなかった場合、つまり、セレクトメニューで「無効」が選択された場合です。この場合、次の 9 行目と 10 行目が実行されます。
■ 9 行目： document.form1.text1.disabled = true;
テキストボックスを無効（入力不可）の状態にします。これだけでは色は変わりません。
■ 10 行目： document.form1.text1.style.backgroundColor='#D4D0C8';
テキストボックスの色をグレー（#D4D0C8）に変更します。
以上で説明は終わりです。この例では、テキストボックスを無効にしましたが、テキストエリア、セレクトメニューでも同様です。お試しください。
尚、入力フォームが無効になった状態で、CGI に POST するとどうなるでしょうか？ 答えは、何が入力されていようが、何も送信されません。