○javascriptとコントロール

次のボタンを押すことによりjavascriptが実行され、このページ内のコントロールの状態が変更されます。
状態を元に戻す(再読み込み)

■ TextArea
値を設定して色を変更する

▽ html
<textarea id="TextArea1" cols="20" rows="2">TextArea1</textarea>
▽ javascript
document.getElementById("TextArea1").value="test";
document.getElementById("TextArea1").style.color='white';
document.getElementById("TextArea1").style.backgroundColor='black';

■ text
値を設定する

▽ html
<input id="TextBox1" type="text" value="TextBox1" />
▽ javascript
document.getElementById("TextBox1").value="test";

■ file

▽ html
<input id="File1" type="file"/>
▽ javascript
値の設定は出来ないがリセットは可能
document.getElementById("File1").value="";

■ password
値を設定する

▽ html
<input id="Password1" type="password" />
▽ javascript
document.getElementById("Password1").value="test";

■ checkbox
フラグを立てる
Checkbox1
▽ html
<input id="Checkbox1" type="checkbox"><span id="Checkbox1.Label">Checkbox1</span></input>
▽ javascript
document.getElementById("Checkbox1").checked=true;
文字はラベルの埋め込みです

■ radio
フラグを立てる
Radio1
Radio2
▽ html
<input id="Radio1" type="radio" name="name"><span id="Radio1.Label">Radio1</span></input>
<input id="Radio2" type="radio" checked name="name"><span id="Radio2.Label">Radio2</span></input>
▽ javascript
document.getElementById("Radio1").checked=true;
文字はラベルの埋め込みです

■ label
値を設定する
Label
▽ html
<span id="Label1">Label</span>
▽ javascript
document.getElementById("Label1").innerHTML="test";

■ DropDownList 幅数が1のselected
選択する

▽ html
<select name="DropDownList1" id="DropDownList1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="test">test</option>
<option value="DropDownList1" selected="selected">DropDownList1</option>
</select>
▽ javascript
document.getElementById("DropDownList1").value="test";

■ ListBox 幅数が4のselected
選択する 値の追加　値の削除

▽ html
<select size="4" name="ListBox1" id="ListBox1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="test" selected="selected">test</option>
<option value="ListBox1" selected="selected">ListBox1</option>
</select>
▽ javascript
値の追加
var pos = document.createElement('option');
pos.value = "add";
pos.innerHTML = "add";
document.getElementById("ListBox1").appendChild(pos);
値の削除
document.getElementById("ListBox1").options[0] = null;
値の選択
document.getElementById("ListBox1").value="test";

■ button
値を設定する 無効化

▽ html
<input id="Submit2" type="button" value="テストボタン" onclick="return button1_click()" />
▽ javascript
ボタンの値を設定し無効化
function button1_click(){
  document.getElementById("Submit2").value="test";
  document.getElementById("Submit2").disabled=true;
}
ボタンの値を設定し有効化
function button2_click(){
  document.getElementById("Submit2").value="テストボタン";
  document.getElementById("Submit2").disabled=false;
}

■ 送信ボタンの確認メッセージ
ファイルやテキストボックスなどのデータをサーバに送信する前に確認メッセージを出します。
確認メッセージにより送信かキャンセルを選ぶ事が出来ます。
このサンプルでは、なにも送信されません。
<script language="javascript" type="text/javascript">
function test(){
	if(window.confirm('送信しますか？')){ 
		return true; 
	}else{
		window.alert('キャンセルしました'); 
		return false; 
	}
}
</script>

<form method="post" action="./" enctype="multipart/form-data" onSubmit="return test()"> 
<input type="submit" name="write" value="送信ボタン">
</form>
formタグで囲まれた中での送信を行うと、onSubmit="return test()の指定により関数test()が呼ばれます、関数の前に return を付ける事により戻り値で送信やキャンセルを行う事が出来ます。
returnを忘れると問答無用で送信されてしまいます。
テキストボックスやチェックの内容を送信する場合には必要ありませんが、ファイルなどを送信する場合には、 enctype="multipart/form-data" を入れておく必要があります。


▲トップページ > Visual BASIC と C#