※本ソフトの公開・サポートは終了しました。
ホーム > スクリプト作成に関する話題 > クリックや選択すると状態が変化するフォーム要素を操作する

クリックや選択すると状態が変化するフォーム要素を制御するには
 〜 スクリプトでイベントを発生させる方法 〜

(目次)

1.概要

Web ページでチェックボックスや選択項目をクリックすると、入力欄や送信ボタンが自動的に有効になることがあります。

ここでは、それら項目の動作をスクリプトから制御する方法を紹介します。

2.チェックボックスやボタンの場合(onclick イベントを使用)

チェックボックスの場合は、onclick イベントでスクリプトが実行されることが多いです。この場合、要素の click() メソッドを単純に呼び出せば動作します。

下に例を示します。チェックボックスをクリックすると、「入力欄:」の有効・無効状態が切り替わります。

これをチェックすると下の入力欄が有効になる

入力欄:

●上の入力欄の HTML ソース(抜粋)

onclick イベントが発生すると HTML ソース内で定義されている setEditEnable メソッドが呼ばれて、「入力欄」の有効・無効が切り替わるようになっています。

<script type="text/javascript"> 
function setEditEnable(strName, boolEnable){ 
  var elm = document.getElementsByName(strName).item(0);
  elm.disabled = !boolEnable;
  if (boolEnable) {
    elm.value = "入力可";
  } else {
    elm.value = "入力不可";
  }
} 
</script> 

<form action="" name="form1">
<p>
  <input type="checkbox" name="chk1" onclick="setEditEnable('edt1', this.checked)" />
  これをチェックすると下の入力欄が有効になる</p>
<p> 入力欄:
  <input type="text" name="edt1" value="初期値" disabled="disabled" /></p>
</form>
●click を処理するスクリプト

下のスクリプトを実行すると、チェックボックスの click メソッドを実行します。click メソッドが実行されると、onclick イベントが発生し、入力欄の有効・無効状態が切り替わります。

※VBScript、JavaScript 共通です。


ActiveDocWin.document.form1.elements("chk1").click()

3.セレクトボックスの場合(onchange イベントを使用)

セレクトボックスの場合は、onchange イベントでスクリプトが実行されることが多いです。この場合、fireEvent メソッドで、イベントを強制的に発生する必要があります。スクリプトから項目の選択状態を変更しただけではうまく動作しません。

下に例を示します。「無効」、「有効」欄を選択すると、下の入力欄の有効・無効状態が切り替わります。

入力欄:

●上の入力欄の HTML ソース(抜粋)

onchange イベントが発生すると HTML ソース内で定義されている setEditEnable メソッドが呼ばれて、「入力欄」の有効・無効が切り替わるようになっています。

setEditEnable メソッドは、前項のチェックボックスの例と同じものなので省略しました。

<form action="" name="form2">
<p>
  <select name="sel1" size="2" onchange="setEditEnable('edt2', selectedIndex)">
    <option value="0" selected="selected">無効</option>
    <option value="1">有効</option>
  </select>
</p>
<p> 入力欄:
  <input type="text" name="edt2" value="初期値" disabled="disabled" />
</p>
</form>
●スクリプト本体

下のスクリプトを実行すると、セレクトボックスの「有効」が選択され、入力欄の有効・無効状態が切り替わります。fireEvent メソッドで onchange イベントを発生させるのがポイントです。

(1)VBScript 版

set oSel =ActiveDocWin.document.form2.elements("sel1")
oSel.selectedIndex = 1
oSel.fireEvent("onchange")

(2)JavaScript 版

var oSel =ActiveDocWin.document.form2.elements["sel1"];
oSel.selectedIndex = 1;
oSel.fireEvent("onchange");

4.その他の場合

上の2つのパターンで対応できない場合は、fireEvent メソッドでスクリプトが関連づけられているイベントを発生させる必要があります。

調べ方としては、Web ページ内で目的のチェックボックスなどを含むように範囲選択して、ScriptBrowserK の[表示]- [選択範囲内のソースを表示] メニューを実行するのが簡単です。表示された HTML ソースで <INPUT> タグの onclick="..." など、使用しているイベントを調べます。

ただし、attachEvent でスクリプトを関連づけている Web ページの場合は、この方法では判別できません。難しくなりますが、Web ページ内の JavaScript を解析するなど、他の方法で調べる必要があります。

5.(参考)イベントの一覧

イベントの一覧については、下のマイクロソフトの DHTML の解説ページを参考にしてください。

●DHTML Events (英語)
http://msdn.microsoft.com/en-us/library/ms533051.aspx

●イベント (日本語)
http://msdn.microsoft.com/ja-jp/library/cc392219(v=MSDN.10).aspx

以上です。

(2010/05/06)

Copyright (c) 2011 Akiyoshi Kozuka (http://www.scriptbrowserk.com/)