【1】以下のように 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 dataDelete() {
//データを削除する関数
if(!confirm("本当に削除しますか？")){
return ;
}
if(dataCheck(0)){
var mySql = "delete from T04Customer where CST_CD = " + Number(txtCstCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
textClear();
document.getElementById("addressDisplay").innerHTML = "";
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】「削除」ボタンをクリックします。
【6】削除確認のメッセージが表示されました。
【7】「キャンセル」をクリックします。
【8】キャンセルしたので何も起こりません。
【9】もう一度「削除」ボタンをクリックします。
【10】今度は「OK」をクリックします。
【11】削除したというメッセージが表示されます。
【12】削除のSQL文が正しく作成されていることを確認してください。
【13】「山田 花子」が削除されました。
【14】顧客選択ボックスからも「山田 花子」が消えていることを確認してください。
【15】データベース「SampleDB010.mdb」のテーブル「T04Customer」をデータシートビューで開き、レコードが削除されていることを確認します。
【解説】
(1)削除ボタンをクリックしたときに呼び出される、関数dataDelete()を見てみましょう。
function dataDelete() {
省略
if(!confirm("本当に削除しますか？")){
return ;
}
省略
}
レコードを削除する時、いきなり削除するより念のため本当に削除するかどうかの確認メッセージを表示したほうが安全です。削除したデータは元に戻せません。
今まで何回も出てきた「alert」はメッセージを表示できますが、ボタンにより処理を分けることはできません。そんなときは「confirm」を使います。
confirmは「OK」、「キャンセル」ボタンでその後の処理をコントロールすることができます。
基本形は以下のようになります。
if(confirm("メッセージ")){
処理
}else{
処理
}
OKをクリックしたときはif文の条件式が「true」、キャンセルをクリックしたときは「false」になり、elseを使って処理を分けることができます。elseは必要がなければ省略できます。
それでは今回の場合を見てみましょう。if文の条件式が「!confirm」となっているところに注意してください。
if(!confirm("本当に削除しますか？")){
return ;
}
「!」で否定していますから、さっきとは逆にキャンセルをクリックしたときに「true」になるという意味です。キャンセルしたときは「return;」で処理を終了しますので、関数dataDelete()ではreturn以降のプログラムは実行されません。つまり削除処理は行われないということになります。
更新の場合もデータは元に戻りませんので、できれば「confirm」を使ったほうがいいですね。
(2)また、関数dataDelete()の中で関数dataCheck()を呼び出している部分ですが、実引数に「0」を渡しています。関数dataCheck()を見るとCST_CD以外は「flag == 1」の時（追加・更新）にしかチェックされませんので、削除の場合はCST_CD以外は未入力でも大丈夫ということになります。
if(dataCheck(0){
}
【SQL文の組み立て方】
最終的に組み立てたいSQL文です。
delete from T04Customer where CST_CD = 11
全体を「"」（ダブルクォーテーション）で囲みます。
"delete from T04Customer where CST_CD = 11"
値をコントロールや変数に置き換えます。
"delete from T04Customer where CST_CD = Number(txtCstCd.value)"
コントロールや変数の前後に半角空白を入れ切り離します。
"delete from T04Customer where CST_CD = Number(txtCstCd.value)"
コントロールや変数以外の文字列部分を「"」（ダブルクォーテーション）で囲みます。
"delete from T04Customer where CST_CD = " Number(txtCstCd.value)
コントロールや変数と文字列を「+」で結合します。
"delete from T04Customer where CST_CD = " + Number(txtCstCd.value)
変数mySqlに代入して1行のプログラムの終わりをあらわす「;」（セミコロン）を付けます。
var mySql = "delete from T04Customer where CST_CD = " + Number(txtCstCd.value);
