フォーム変更時の処理(onChange)

広告

フォーム内の「選択リスト」や「ラジオボタン」などの値が変更された場合の処理を記述します。 

<select name="name" onChange="処理">
<option value="val1">option_val1</option>
<option value="val2">option_val2</option>
</select>

<input type="radio" name="name" value="val1" onChange="処理">str1
<input type="radio" name="name" value="val2" onChange="処理">str2

例えばフォームの選択リストで、どれかの項目が選択された時の処理は次のように記述することができます。 

function kakunin(){
  obj = document.test.linkselect;

  index = obj.selectedIndex;
  if (index != 0){
    href = obj.options[index].value;
    location.href = href;
  }
}

....

<form name="test">
<select name="linkselect" onChange="kakunin()">
<option value="">選択して下さい</option>
<option value="http://www.yahoo.co.jp/">Yahoo!Japan</option>
<option value="http://www.google.co.jp/">Google</option>
</select>
</form>
サンプルコード

では実際に試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="./js/script3_1.js">
</script>

<title>JavaScript テスト</title>
</head>
<body>

<p>
<form name="test">
<select name="linkselect" onChange="kakunin()">
<option value="">選択して下さい</option>
<option value="http://www.yahoo.co.jp/">Yahoo!Japan</option>
<option value="http://www.google.co.jp/">Google</option>
</select>
</form>
</p>

</body>
</html>

function kakunin(){
  obj = document.test.linkselect;

  index = obj.selectedIndex;
  if (index != 0){
    href = obj.options[index].value;
    location.href = href;
  }
}

上記をブラウザで見ると下記のように表示されます。

p3-1

選択メニューから1つ選択して下さい。

p3-2

選択された項目のWebサイトへ移動します。

p3-3

このように「onChange」を使うことでフォーム変更時の処理を記述することができます。

( Written by Tatsuo Ikura )