【1】以下のように customer.js を更新します。他は前回までと同じです。
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;
}
function dataInsert() {
//データを追加する関数
try{
if(dataCheck(1)){
var mySql = "insert into T04Customer values(" ;
mySql = mySql + Number(txtCstCd.value) + ",'" + txtCstName.value + "'," ;
mySql = mySql + Number(txtTownCd.value) + ",'" + txtAddress.value + "','" ;
mySql = mySql + txtTel.value + "','" + txtBirth.value + "'," ;
mySql = mySql + ((radioSexCd[0].checked)? 0 : 1) ;
mySql = mySql +")";
sqlDisplay(mySql);
database.Execute(mySql);
cstDisplay();
alert("追加しました。");
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}
function dataUpdate() {
//データを更新する関数
if(dataCheck(1)){
var mySql = "update T04Customer set ";
mySql = mySql + "CST_NAME = '" + txtCstName.value + "', ";
mySql = mySql + "TOWN_CD = " + Number(txtTownCd.value) + ", ";
mySql = mySql + "ADDRESS = '" + txtAddress.value + "', ";
mySql = mySql + "TEL = '" + txtTel.value + "', ";
mySql = mySql + "BIRTH = '" + txtBirth.value + "', ";
mySql = mySql + "SEX_CD = " + ((radioSexCd[0].checked)? 0 : 1);
mySql = mySql + " where CST_CD = " + Number(txtCstCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
cstDisplay();
alert("更新しました。");
}
}
function dataCheck(flag){
//データをチェックする関数
var tempStr = "は必ず入力してください。";
if (txtCstCd.value == "") {
alert("CST_CD" + tempStr);
return false;
}
if (txtCstCd.value.match(/[^0-9]/)) {
alert("CST_CDには半角数字を入力してください！");
txtCstCd.focus();
return false;
}
if (flag == 1 && txtCstName.value == "") {
alert("CST_NAME" + tempStr);
return false;
}
if (flag == 1 && txtTownCd.value == "") {
alert("TOWN_CD" + tempStr);
return false;
}
if (flag == 1 && txtAddress.value == "") {
alert("ADDRESS" + tempStr);
return false;
}
if (flag == 1 && txtTel.value == "") {
alert("TEL" + tempStr);
return false;
}
if (flag == 1 && txtBirth.value == "") {
alert("BIRTH" + tempStr);
return false;
}
if (flag == 1 && !txtBirth.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
alert("BIRTHは「yyyy/mm/dd」形式で入力してください！");
return false;
}
return true;
}
【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★database.js、base.css、customer.html、customer.css、customer.js、address.html、address.css、address.js は必ず同じフォルダ内に置いてください。
【3】顧客マスターを開いたら、顧客選択ボックスから「山田 太郎」を選択します。他の名前でもかまいません。
【4】山田 太郎のデータが表示されました。
【5】CST_CD以外を適当に変更します。
＊CST_CDを変えると他のレコードが更新されますのでご注意ください。
【6】「更新」ボタンをクリックします。
【7】レコードが更新されました。
【8】更新のSQL文が正しく作成されていることを確認してください。
【9】データベース「SampleDB010.mdb」のテーブル「T04Customer」をデータシートビューで開き、レコードが更新されていることを確認します。
【解説】
顧客選択ボックスを切り替えた時に動く、関数cstChange()でCST_CDを取得している部分があります。
cstCd = Number(obj.value);
更新の時、この変数cstCdをwhereの抽出条件として使えそうですが、あえてtxtCstCd.valueを使っています。
mySql + " where CST_CD = " + Number(txtCstCd.value);
更新するときは必ず選択ボックスで選択するなら変数cstCdが使えますが、いくつか不具合が起こる操作があります。
例えば顧客マスターを開いた直後に、顧客選択ボックスを使わずにすぐ「最大値」をクリックしてレコードを追加した場合を考えてみましょう。この時変数cstCdには何も代入されていません。そのまま更新すると変数cstCdは空のままなのでエラーになります。
また顧客選択ボックスで選択した場合も、新しく追加した時点では変数cstCdには前の顧客のCDが残ったままです。
そこで念のためテキストボックスの値のほうを使っているわけです。
【SQL文の組み立て方】
最終的に組み立てたいSQL文です。
update T04Customer set CST_NAME = '山田 花子', TOWN_CD = 21535, ADDRESS = '４５６', TEL = '111-111-1111', BIRTH = '1980/12/01', SEX_CD = 1 where CST_CD = 11
全体を「"」（ダブルクォーテーション）で囲みます。
"update T04Customer set CST_NAME = '山田 花子', TOWN_CD = 21535, ADDRESS = '４５６', TEL = '111-111-1111', BIRTH = '1980/12/01', SEX_CD = 1 where CST_CD = 11"
値をコントロールや変数に置き換えます。
"update T04Customer set CST_NAME = 'txtCstName.value', TOWN_CD = Number(txtTownCd.value), ADDRESS = 'txtAddress.value', TEL = 'txtTel.value', BIRTH = 'txtBirth.value', SEX_CD = radioSexCd where CST_CD = Number(txtCstCd.value)"
コントロールや変数の前後に半角空白を入れ切り離します。
"update T04Customer set CST_NAME = ' txtCstName.value ', TOWN_CD = Number(txtTownCd.value) , ADDRESS = ' txtAddress.value ', TEL = ' txtTel.value ', BIRTH = ' txtBirth.value ', SEX_CD = radioSexCd where CST_CD = Number(txtCstCd.value) "
コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"update T04Customer set CST_NAME = '" txtCstName.value "', TOWN_CD =" Number(txtTownCd.value) ", ADDRESS = '" txtAddress.value "', TEL = '" txtTel.value "', BIRTH = '" txtBirth.value "', SEX_CD = " radioSexCd " where CST_CD = " Number(txtCstCd.value)
コントロールや変数と文字列を「+」で結合します。
"update T04Customer set CST_NAME = '" + txtCstName.value + "', TOWN_CD = " + Number(txtTownCd.value) + ", ADDRESS = '" + txtAddress.value + "', TEL = '" + txtTel.value + "', BIRTH = '" + txtBirth.value + "', SEX_CD = " + radioSexCd + " where CST_CD = " + Number(txtCstCd.value)
変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "update T04Customer set CST_NAME = '" + txtCstName.value + "', TOWN_CD = " + Number(txtTownCd.value) + ", ADDRESS = '" + txtAddress.value + "', TEL = '" + txtTel.value + "', BIRTH = '" + txtBirth.value + "', SEX_CD = " + radioSexCd + " where CST_CD = " + Number(txtCstCd.value);
radioSexCdを (式)？真:偽 の形にします。
var mySql = "update T04Customer set CST_NAME = '" + txtCstName.value + "', TOWN_CD = " + Number(txtTownCd.value) + ", ADDRESS = '" + txtAddress.value + "', TEL = '" + txtTel.value + "', BIRTH = '" + txtBirth.value + "', SEX_CD = " + ((radioSexCd[0].checked)? 0 : 1) + " where CST_CD = " + Number(txtCstCd.value);
上記のままでもかまいませんが、SQL文が長いので改行して表す方法は以下のようになります。
var mySql = "update T04Customer set ";
mySql = mySql + "CST_NAME = '" + txtCstName.value + "', ";
mySql = mySql + "TOWN_CD = " + Number(txtTownCd.value) + ", ";
mySql = mySql + "ADDRESS = '" + txtAddress.value + "', ";
mySql = mySql + "TEL = '" + txtTel.value + "', ";
mySql = mySql + "BIRTH = '" + txtBirth.value + "', ";
mySql = mySql + "SEX_CD = " + ((radioSexCd[0].checked)? 0 : 1);
mySql = mySql + " where CST_CD = " + Number(txtCstCd.value);
