前回までの顧客マスターを見ると、性別を表すSEX_CDが数字になっているため、男性か女性かわかりません。
これはデータベースAccessから取り出した値をそのまま表示しているからです。
性別を表示するにはいろんな方法があります。データベースには性別マスターがあるため、顧客のデータを取得するときにSQL文で性別を含めることもできます。しかし追加、更新を考えると、SEX_CDのvalueは数値のままにしておいたほうが都合がいいです。そこでラジオボタンを使い、見かけだけ文字で選択できるようにしました。
【1】以下のように customer.html、customer.js を更新します。他は前回までと同じです。
customer.html
<html>
<head>
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="customer.js"></script>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="customer.css" rel="stylesheet" type="text/css">
<title>customer</title>
</head>
<body>
顧客マスター
<div id="customerDisplay"></div>
<div id="sqlDisplay"></div>
<form name="form1">
<p>
<input type="button" name="btnInsert" id="btnInsert" value="追加">
<input type="button" name="btnUpdate" id="btnUpdate" value="更新">
<input type="button" name="btnDelete" id="btnDelete" value="削除">
</p>
CST_CD:<input type="text" name="txtCstCd" id="txtCstCd">
<a href="" name="linkMaxCd" id="linkMaxCd">最大値</a> <br />
CST_NAME:<input type="text" name="txtCstName" id="txtCstName"><br />
TOWN_CD:<input type="text" name="txtTownCd" id="txtTownCd"><br />
ADDRESS:<input type="text" name="txtAddress" id="txtAddress"><br />
TEL:<input type="text" name="txtTel" id="txtTel"><br />
BIRTH:<input type="text" name="txtBirth" id="txtBirth"><br />
SEX_CD:<input type="radio" name="radioSexCd" value="0">男
<input type="radio" name="radioSexCd" value="1">女
</form>
<div id="addressDisplay"></div>
</body>
</html>
customer.js
var w;
var cstCd;
var txtCstCd;
var txtCstName;
var txtTownCd;
var txtAddress;
var txtTel;
var txtBirth;
var radioSexCd;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtCstCd = document.getElementById("txtCstCd");
txtCstName = document.getElementById("txtCstName");
txtTownCd = document.getElementById("txtTownCd");
txtAddress = document.getElementById("txtAddress");
txtTel = document.getElementById("txtTel");
txtBirth = document.getElementById("txtBirth");
radioSexCd = document.getElementsByName("radioSexCd");
txtCstCd.onfocus = function (){focus(this);}
txtCstCd.onblur = function (){blur(this);}
txtCstName.onfocus = function (){focus(this);}
txtCstName.onblur = function (){blur(this);}
txtTownCd.onfocus = function (){focus(this);addressOpen();}
txtTownCd.onblur = function (){blur(this);}
txtAddress.onfocus = function (){focus(this);}
txtAddress.onblur = function (){blur(this);}
txtTel.onfocus = function (){focus(this);}
txtTel.onblur = function (){blur(this);}
txtBirth.onfocus = function (){focus(this);}
txtBirth.onblur = function (){blur(this);}
document.getElementById("btnInsert").onclick = function (){dataInsert();}
document.getElementById("btnUpdate").onclick = function (){dataUpdate();}
document.getElementById("btnDelete").onclick = function (){dataDelete();}
document.getElementById("linkMaxCd").onclick = function (){return maxCd();}
dbConnect();
cstDisplay();
}
function addressOpen(){
txtAddress.focus();
w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}
function focus(obj){
obj.style.backgroundColor = "#ffff00";
}
function blur(obj){
obj.style.backgroundColor = "#ffffff";
}
function cstDisplay() {
//顧客を表示する関数
var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";
var recordSet = database.Execute(mySql);
document.getElementById("customerDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectCst\" id=\"selectCst\">\n";
tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("customerDisplay").innerHTML = tempHtml;
document.getElementById("selectCst").onchange = function (){cstChange(this);}
recordSet.Close();
recordSet = null;
}
function cstChange(obj) {
//顧客を選択した時の関数
if(obj.selectedIndex==0){
textClear();
document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
alert("顧客を選択してください。");
}else{
cstCd = Number(obj.value);
var mySql = "select * from T04Customer where CST_CD = " + obj.value ;
var recordSet = database.Execute(mySql);
txtCstCd.value = recordSet(0);
txtCstName.value = recordSet(1);
txtTownCd.value = recordSet(2);
txtAddress.value = recordSet(3);
txtTel.value = recordSet(4);
txtBirth.value = dateFormat(recordSet(5));
(recordSet(6) == 0)? radioSexCd[0].checked = true : radioSexCd[1].checked = true;
document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(2),database);
recordSet.Close();
recordSet = null;
sqlDisplay("selectedIndex:" + obj.selectedIndex + " value:" + obj.value);
}
}
function sqlDisplay(_mySql) {
//SQLを表示する関数
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
function maxCd(){
//最大値を取得する関数
var mySql = "select max(CST_CD) from T04Customer";
var recordSet = database.Execute(mySql);
textClear();
document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("sqlDisplay").innerHTML = "";
cstDisplay();
txtCstCd.value = recordSet(0) + 1;
txtCstName.focus();
return false;
}
function textClear() {
//テキストボックスをクリアする関数
txtCstCd.value = "";
txtCstName.value = "";
txtTownCd.value = "";
txtAddress.value = "";
txtTel.value = "";
txtBirth.value = "";
radioSexCd[0].checked = true;
}
【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。
【3】顧客マスターを開いたら、顧客選択ボックスから女性の名前を選択してください。
性別が女性になっています。
【4】次は男性の名前を選択してください。
性別が男性になっています。
【5】顧客選択ボックスをいろいろ切り替えて、動作を確認してください。
【6】「最大値」をクリックしたときは、初期値として「男」が選択されます。
【解説】
(1)customer.html側ではテキストボックスからラジオボタンに変更しました。
SEX_CD:<input type="text" name="txtSexCd" id="txtSexCd">
↓
SEX_CD:<input type="radio" name="radioSexCd" value="0">男
<input type="radio" name="radioSexCd" value="1">女
1つのテキストボックスが2つのラジオボタンになりました。nameをradioSexCdに変更しています。またラジオボタンは配列で扱うのでidは不要になりました。
ポイントはそれぞれのvalueがデータベースのSEX_CDと一致していることです。追加、更新ではこのvalueの値が使われます。
(2)関数init()では変数radioSexCdにラジオボタンの参照を代入しています。
function init() {
省略
radioSexCd = document.getElementsByName("radioSexCd");
省略
}
getElementsByNameを使うことで、ラジオボタンが配列で扱えるようになりました。
radioSexCd[0]、radioSexCd[1]
(3)関数cstChange()でラジオボタンを切り替えています。
function cstChange(obj) {
省略
(recordSet(6) == 0)? radioSexCd[0].checked = true : radioSexCd[1].checked = true;
省略
}
「recordSet(6)」にはSEX_CD（0か1）が入っています。もし0なら男性ですのでradioSexCd[0]をチェックします。それ以外なら女性ですのでradioSexCd[1]をチェックします。これが自動でラジオボタンを切り替える仕組みです。if文を使っても同じことができます。
(4)関数textClear()が呼び出された時には男を初期値としています。
function textClear() {
省略
radioSexCd[0].checked = true;
}
