JavaScript 入力項目
今回は画面入力をやります。項目取得
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<input type="text" id="id1" name="name1" class="class1" value="X" />
</body>
<script type="text/javascript">
// idを指定
alert(document.getElementById("id1").value);
// nameを指定(配列で取得される)
alert(document.getElementsByName("name1")[0].value);
// classsを指定(配列で取得される)
alert(document.getElementsByClassName("class1")[0].value);
// タグを指定(配列で取得される)
alert(document.getElementsByTagName("input")[0].value);
</script>
</html>
項目を取得するにはdocument.getElement～メソッドを使用します。id指定取得以外は配列で取得されるので注意して下さい。
テキストボックス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<input type="text" name="name1" id="id1" value="X" />
</body>
<script type="text/javascript">
alert(document.getElementById("id1").value);
document.getElementById("id1").value = "test1";
</script>
</html>
テキストボックスの値を取得したり、値をセットしたりできます。
document.getElementById(ID).valueで値の取得、セットの両方が出来ます。
document.getElementsByNameでも同じことが出来ますが、今回は説明を省略します。
(getElementsByNameは チェックボックスを参考にして下さい)
ボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
<script type="text/javascript">
//テキスト読み込み時に実行
document.addEventListener("DOMContentLoaded",function(){
document.getElementById("id2").onclick = function(){
execId2();
};
},false);
function execId2(){
document.getElementById("id1").value = "test1";
}
</script>
</head>
<body>
<form method="POST" action="/test" name="name0" id="id0">
<input type="text" name="name1" id="id1" value="X" />
<input type="button" name="name2" id="id2" value="ボタン" />
<input type="submit" name="name3" id="id3" value="送信" />
</form>
</body>
</html>
ボタンを押してJavaScriptの関数を呼び出したり、Servletなどにサーバ側処理を呼び出したりします。
ボタンにはbuttonとsubmitがあり、buttonはonclickイベントに関数を割り当てて、関数を呼び出します。
submitはFORMタグのactionに指定されたサーバ側処理を呼び出します。
submit処理はsubmitボタン以外にもJavaScriptの処理でForm.submit();を呼び出すことにより実行することが出来ます。
セレクト(コンボボックス)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<select id="sel1">
<option value="a">あ</option>
<option value="b">い</option>
<option value="c">う</option>
</select>
<input type="button" id="id1" value="選択アイテム" />
<input type="button" id="id2" value="追加１" />
<input type="button" id="id3" value="追加２" />
<input type="button" id="id4" value="削除" />
<input type="button" id="id5" value="選択" />
<input type="button" id="id6" value="変更イベント" />
</body>
<script type="text/javascript">
//指定アイテムを選択
document.getElementById("sel1").selectedIndex = 1;
//アイテム情報を取得
document.getElementById("id1").onclick = function(){
var obj = document.getElementById("sel1");
var idx = obj.selectedIndex;
var key = obj.options[idx].value;
var value = obj.options[idx].text;
alert(idx + ":" + key + ":" + value);
};
//アイテムの追加
document.getElementById("id2").onclick = function(){
var obj = document.getElementById("sel1");
obj.length++;
obj.options[obj.length - 1].value = "d";
obj.options[obj.length - 1].text = "え";
};
//アイテムの挿入
document.getElementById("id3").onclick = function(){
var option = document.createElement("option");
option.value = "e";
option.text = "お";
var obj = document.getElementById("sel1");
obj.add(option, 0);
};
//アイテムの削除
document.getElementById("id4").onclick = function(){
var obj = document.getElementById("sel1");
var idx = obj.selectedIndex;
if(idx != -1){
obj.remove(idx);
}
// 全アイテム削除は以下でできる
// obj.length = 0;
};
//アイテムの選択
document.getElementById("id5").onclick = function(){
var obj = document.getElementById("sel1");
for(var i = 0;i < obj.length;i++){
// if(obj.options[i].text == "う"){
if(obj.options[i].value == "c"){
obj.options[i].selected = true;
break;
}
}
};
//値変更時のイベント取得
document.getElementById("id6").onclick = function(){
var obj = document.getElementById("sel1");
obj.onchange = function(){
document.getElementById("id1").click();
}
};
</script>
</html>
セレクトはコンボボックスのように使ったり、リストボックスのように使ったりできます。
JavaScriptから項目の選択、追加、削除などが出来ます。
セレクト(リストボックス)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<select id="sel1" size="3" multiple >
<option value="a">あ</option>
<option value="b">い</option>
<option value="c">う</option>
<option value="e">え</option>
<option value="f">お</option>
</select>
<br />
<input type="button" id="id1" value="選択アイテム" />
<input type="button" id="id4" value="削除" />
<input type="button" id="id5" value="選択" />
<input type="button" id="id6" value="変更イベント" />
</body>
<script type="text/javascript">
//指定アイテムを選択
document.getElementById("sel1").selectedIndex = 1;
//アイテム情報を取得
document.getElementById("id1").onclick = function(){
var obj = document.getElementById("sel1");
for (var i = 0; i < obj.options.length; i++) {
if (obj.options[i].selected == true) {
var key = obj.options[i].value;
var value = obj.options[i].text;
alert(i + ":" + key + ":" + value);
}
}
};
//アイテムの削除
document.getElementById("id4").onclick = function(){
var obj = document.getElementById("sel1");
for (var i = obj.options.length -1; i >= 0 ; i--) {
if (obj.options[i].selected == true) {
obj.remove(i);
}
}
// 全アイテム削除は以下でできる
// obj.length = 0;
};
//アイテムの選択
document.getElementById("id5").onclick = function(){
var obj = document.getElementById("sel1");
for(var i = 0;i < obj.length;i++){
obj.options[i].selected = false;
}
for(var i = 0;i < obj.length;i++){
if(obj.options[i].text == "う" || obj.options[i].value == "b"){
obj.options[i].selected = true;
}
}
};
//値変更時のイベント取得
document.getElementById("id6").onclick = function(){
var obj = document.getElementById("sel1");
obj.onchange = function(){
document.getElementById("id1").click();
}
};
</script>
</html>
パソコンのキーボードのShiftボタンやCtrlボタンを押しながらリストを選択すると複数の項目を選択することができます。
データ取得処理などは複数選択されることも考慮して処理をする必要があります。
チェックボックス
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<input type="checkbox" name="chk1" value="a" />あああ<br>
<input type="checkbox" name="chk1" value="b" checked />いいい<br>
<input type="checkbox" name="chk1" value="c" />ううう<br>
<br />
<input type="checkbox" id="chkID" value="d" />単独チェックボックス<br>
<br />
<input type="button" id="id1" value="選択アイテム" />
<input type="button" id="id2" value="全選択" />
<input type="button" id="id3" value="全選択解除" />
</body>
<script type="text/javascript">
// アイテム情報を取得
document.getElementById("id1").onclick = function(){
var objs = document.getElementsByName("chk1");
// 複数の場合
for (var i = 0; i < objs.length; i++) {
if (objs[i].checked) {
var key = objs[i].value;
alert(i + ":" + key);
}
}
// 単数の場合
if( document.getElementById("chkID").checked){
alert(document.getElementById("chkID").value);
}
};
// 全選択
document.getElementById("id2").onclick = function(){
var objs = document.getElementsByName("chk1");
// 複数の場合
for (var i = 0; i < objs.length; i++) {
objs[i].checked = true;
}
// 単数の場合
document.getElementById("chkID").checked = true;
};
// 全選択解除
document.getElementById("id3").onclick = function(){
var objs = document.getElementsByName("chk1");
// 複数の場合
for (var i = 0; i < objs.length; i++) {
objs[i].checked = false;
}
// 単数の場合
document.getElementById("chkID").checked = false;
};
</script>
</html>
チェックボックスはdocument.getElementsByNameで取得後、ループで選択値を取得する方法が使いやすいです。
もちろん document.getElementById も使用できます。
.checked で選択されているか確認でき、.value で値を取得します。
ラジオボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
<input type="radio" name="chk1" value="a" onclick="alert(this.value);"/>あああ<br>
<input type="radio" name="chk1" value="b" checked />いいい<br>
<input type="radio" name="chk1" value="c" />ううう<br>
<br />
<input type="button" id="id1" value="選択アイテム" />
<input type="button" id="id2" value="選択" />
</body>
<script type="text/javascript">
// アイテム情報を取得
document.getElementById("id1").onclick = function(){
var objs = document.getElementsByName("chk1");
for (var i = 0; i < objs.length; i++) {
if (objs[i].checked) {
var key = objs[i].value;
alert(i + ":" + key);
}
}
};
// 選択
document.getElementById("id2").onclick = function(){
var objs = document.getElementsByName("chk1");
for (var i = 0; i < objs.length; i++) {
if(objs[i].value == "c"){
objs[i].checked = true;
}
}
};
</script>
</html>
チェックボックスは選択項目を複数選択することが出来ますが、ラジオボタンは１つになります。操作はチェックボックスと似てます。
ページのトップへ戻る