住所入力関係のプログラムをまとめることで、顧客マスターのプログラムがシンプルになり、取引先マスターや社員マスターなど、同じように住所を入力するシステムで再利用できるようになります。
なおサブウィンドウはブラウザでポップアップを許可しないと開かないことがありますので、許可してください。
【1】以下のように database.js、customer.html、customer.css、customer.js、address.js を更新し、address.html、address.cssを新しく作成します。base.css は前回までと共通です。
database.js
var database;
function dbConnect() {
//データベースに接続する関数
database = new ActiveXObject("ADODB.Connection");
database.Open("Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\\SampleDB010.mdb;");
//alert("データベースに接続しました。");
}
function dbClose() {
//データベースを切断する関数
database.Close();
database = null;
//alert("データベースを切断しました。");
}
function addressRefer(townCd) {
//住所を表示する関数
var mySql = "SELECT ('〒' & ZIP_CODE & ' ' & PREF_NAME & CITY_NAME & TOWN_NAME) AS address ";
mySql = mySql + "FROM T03Town,T02City,T01Prefecture ";
mySql = mySql + "WHERE T03Town.CITY_CD = T02City.CITY_CD ";
mySql = mySql + "AND T02City.PREF_CD = T01Prefecture.PREF_CD ";
mySql = mySql + "AND TOWN_CD = " + townCd;
var recordSet = database.Execute(mySql);
var tempAddress = recordSet(0);
//recordSet.Close();
recordSet = null;
return tempAddress;
}
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>
顧客マスター
<form name="form1">
TOWN_CD:<input type="text" name="txtTownCd" id="txtTownCd">
ADDRESS:<input type="text" name="txtAddress" id="txtAddress">
</form>
<div id="addressDisplay"></div>
</body>
</html>
customer.css
#txtaddress {
width: 250px;
}
customer.js
var w;
var txtTownCd;
var txtAddress;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtTownCd = document.getElementById("txtTownCd");
txtAddress = document.getElementById("txtAddress");
txtTownCd.onfocus = function (){addressOpen();}
dbConnect();
}
function addressOpen(){
txtAddress.focus();
w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}
address.html
<html>
<head>
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="address.js"></script>
<link href="address.css" rel="stylesheet" type="text/css">
<title>address</title>
</head>
<body>
住所
<div id="prefDisplay"></div>
<div id="cityDisplay"></div>
<div id="townDisplay"></div>
<div id="townCdDisplay"></div>
<div id="addressDisplay"></div>
</body>
</html>
address.css
#selectPref {
width: 150px;
}
#selectCity {
width: 150px;
}
#selectTown {
width: 300px;
}
address.js
var prefCd;
var cityCd;
onload = init;
onunload = dbClose;
function init() {
dbConnect();
prefDisplay();
}
function prefDisplay(obj) {
//都道府県を表示する関数
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
document.getElementById("prefDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectPref\" id=\"selectPref\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("prefDisplay").innerHTML = tempHtml;
document.getElementById("selectPref").onchange = function (){prefChange(this);}
recordSet.Close();
recordSet = null;
}
function prefChange(obj) {
//都道府県を選択した時の関数
prefCd = Number(obj.value);
cityDisplay();
opener.document.getElementById("txtTownCd").value = "";
opener.document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("townDisplay").innerHTML ="";
}
function cityDisplay() {
//市町村を表示する関数
var mySql = "select CITY_CD,CITY_NAME from T02City where PREF_CD = " + prefCd + " order by CITY_CD" ;
var recordSet = database.Execute(mySql);
document.getElementById("cityDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectCity\" id=\"selectCity\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("cityDisplay").innerHTML = tempHtml;
document.getElementById("selectCity").onchange = function (){cityChange(this);}
recordSet.Close();
recordSet = null;
}
function cityChange(obj) {
//市町村を選択した時の関数
cityCd = Number(obj.value);
opener.document.getElementById("txtTownCd").value = "";
opener.document.getElementById("addressDisplay").innerHTML = "";
townDisplay();
}
function townDisplay() {
//地域を表示する関数
var mySql = "select TOWN_CD,TOWN_NAME from T03Town where CITY_CD = " + cityCd + " order by TOWN_CD" ;
var recordSet = database.Execute(mySql);
document.getElementById("townDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectTown\" id=\"selectTown\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("townDisplay").innerHTML = tempHtml;
document.getElementById("selectTown").onchange = function (){townChange(this);}
recordSet.Close();
recordSet = null;
}
function townChange(obj) {
//地域を選択した時の関数
opener.document.getElementById("txtTownCd").value = obj.value;
opener.document.getElementById("addressDisplay").innerHTML = addressRefer(obj.value);
}
【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。
【3】顧客マスターが表示されました。今回は都道府県の選択ボックスは表示されていません。
【4】TOWN_CDのテキストボックスをクリックします。
【5】セキュリティについてのメッセージが表示されますが、許可してください。
【6】address.htmlがサブウィンドウで開きました。都道府県の選択ボックスはaddress.html側に表示されるようになっています。
【7】address.htmlを見やすい位置に移動します。
【8】都道府県の選択ボックスで、「東京都」を選択します。
【9】市町村の選択ボックスで、「港区」を選択します。
【10】地域の選択ボックスで、「麻布十番」を選択
【11】customer.html側に住所が表示され、TOWN_CDにデータが自動で入力されることを確認してください。
【12】サブウィンドウを閉じます。
【13】これで住所が入力できました。
【14】都道府県、市町村、地域をいろいろ変えて動作を確認してください。
【解説】
(1)database.jsに関数addressRefer()を移動しました。addressRefer()はcustomer.jsやadress.jsなど複数のプログラムで共通して使えるようにするためです。またデータベース接続、切断時のアラートはコメントにして表示しないようにしました。
(2)customer.htmlは住所関連のタグが無くなったのでシンプルになりました。
(3)customer.cssはテキストボックスtxtaddressのデザインだけです。
(4)customer.jsはデータベースへの接続、切断とサブウィンドウの表示を行っています。
関数addressOpen()では最初にtxtAddressにフォーカスを移動しています。これはaddress.htmlで住所を入力後、customer.htmlに戻ったときに再び「txtTownCd.onfocus」が動くのを防ぐためです。
window.openという関数を使ってaddress.htmlを後ろに書いた条件（高さ、幅、ツールバーなどいろいろ設定可能）で開きます。""になっている部分はサブウィンドウに名前を付ける場合に使います。
function addressOpen(){
txtAddress.focus();
w = window.open("address.html","","WIDTH=400,HEIGHT=200,STATUS=1");
}
(5)address.htmlは各選択ボックスを表示するための位置をdivでマークしています。
(6)address.cssは各選択ボックスのデザインを行っています。
(7)address.jsのポイントは、サブウィンドウから呼び出し元のウィンドウにある部品や変数を扱うには頭に「opener」を付けることです。
opener.document.getElementById("txtTownCd").value = obj.value;
(8)データベースの接続について
customer.jsとaddress.jsは別々にデータベースに接続しています。
実は「opener」を使うとcustomer.jsで接続したデータベースを、address.jsでも使うことができます。つまり1回だけ接続すればいいわけです。
var recordSet = opener.database.Execute(mySql);
しかしこの方法だと、address.jsからaddressRefer()を呼び出す時に不都合が起こります。addressRefer()の中では以下のように呼び出しているからです。
var recordSet = database.Execute(mySql);
addressRefer()はどのjsから呼び出されたかで工夫する必要があります。
・customer.jsから呼び出された場合
var recordSet = database.Execute(mySql);
・address.jsから呼び出された場合
var recordSet = opener.database.Execute(mySql);
または関数addressRefer()の呼び出し方を変えて、引数にデータベースの参照を含める方法もあります。この方法については次回に説明します。
function townChange(obj) {
省略
opener.document.getElementById("addressDisplay").innerHTML = addressRefer(obj.value,opener.database);
}
function addressRefer(townCd,_database) {
省略
var recordSet = _database.Execute(mySql);
省略
}
どちらの方法も初心者には難しいと思うので、手っ取り早く簡単なのが別々にデータベースを開く方法だったわけです。
