テキストボックスの利用
広告
ここではテキストボックスで入力された値を使って動作を行うようにしてみます。
HTMLページ内に記述されたテキストボックスの値をJavaScriptで取得するにはDOMを用いることで可能です。テキストボックスにIDを指定して値を取得します。
<html> <head> <title>テキストボックステスト</title> </head> <body> <h1>テキストボックステスト</h1> <form> <input type="text" value="ファイル名を入力" id="game" name="gametext"> <input type="button" value="ファイル読み込み" onClick="loadText()"> </form> <div id="disp"></div> </body> </html>
上記のようなHTMLページがあった場合に、現在テキストボックスに入力されている値を取得するには次のように行います。
var selectgame = document.getElementById("game").value;
サンプルページ
今回はHTMLページ内のフォーム上のボタンをクリックすると、テキストボックスで入力されたファイルをサーバから読み込み、そのファイルの中身を指定した位置に表示するようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>テキストボックステスト</title>
<script type="text/javascript">
<!--
var xmlHttp;
function loadText(){
var gamefile = document.getElementById("game").value;
var fileName = "http://www.ajaxtower.jp/sample/" + gamefile;
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = null;
}
}
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", fileName, true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var node = document.getElementById("disp");
node.innerHTML = xmlHttp.responseText;
}
}
// -->
</script>
</head>
<body>
<h1>テキストボックステスト</h1>
<form>
<input type="text" value="ファイル名を入力" id="game" name="gametext">
<input type="button" value="ファイル読み込み" onClick="loadText()">
</form>
<div id="disp"></div>
</body>
</html>
まずHTMLページを表示すると次のように表示されます。
ファイル名を入力してからフォームのボタンをクリックすると入力されたファイル名のファイルをサーバから読み込みHTMLページの指定の箇所を書き換えます。
他のファイル名を入力した場合は次のようになります。
( Written by Tatsuo Ikura )
AjaxTower