Step43・販売伝票顧客名表示: JavaScript初心者入門講座

販売伝票顧客名表示

前回までの販売伝票ではCST_CDが数字だったため、顧客が誰なのかわかりにくいところがありました。

そこで今回は顧客名を選択ボックスで表示したり、入力できるように工夫してみましょう。

【1】以下のように slip.htmlとslip.js を更新します。slip.css、base.css、database.js は前回までと同じです。

slip.html

slip.js

var slipCd;

var txtSlipCd;
var txtSlipDate;
var txtCstCd;

onload = init;
onunload = dbClose;

function init() {
  //初期設定をする関数
  txtSlipCd = document.getElementById("txtSlipCd");
  txtSlipDate = document.getElementById("txtSlipDate");

  txtSlipCd.onfocus = function (){focus(this);}
  txtSlipCd.onblur = function (){blur(this);}
  txtSlipDate.onfocus = function (){focus(this);}
  txtSlipDate.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();
  slipDisplay();
  cstDisplay();
}

function focus(obj){
  obj.style.backgroundColor = "#ffff00";
}

function blur(obj){
  obj.style.backgroundColor = "#ffffff";
}

function slipDisplay() {
  //伝票を表示する関数

  var mySql = "select SLIP_CD,SLIP_DATE from T07Slip order by SLIP_CD";
  var recordSet = database.Execute(mySql);

  document.getElementById("slipDisplay").innerHTML = "";

  var tempHtml = "<select name=\"selectSlip\" id=\"selectSlip\">\n";
  tempHtml = tempHtml + "\t<option value=\"0\">選択してください。</option>\n";
  while (!recordSet.EOF){
    tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + "伝票番号" + recordSet(0) + "　日付" + dateFormat(recordSet(1)) + "</option>\n";
    recordSet.MoveNext();
  }
  tempHtml = tempHtml + "</select>";

  //alert(tempHtml);
  document.getElementById("slipDisplay").innerHTML = tempHtml;
  document.getElementById("selectSlip").onchange = function (){slipChange(this);}

  recordSet.Close();
  recordSet = null;
}

function slipChange(obj) {
  //伝票を選択した時の関数
  if(obj.selectedIndex==0){
    textClear();
    cstDisplay();
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("伝票を選択してください。");
  }else{
    slipCd = Number(obj.value);
    var mySql = "select SLIP_CD,SLIP_DATE,T07Slip.CST_CD,TOWN_CD,ADDRESS ";
    mySql = mySql +"from T07Slip,T04Customer ";
    mySql = mySql +"where T07Slip.CST_CD = T04Customer.CST_CD ";
    mySql = mySql +"and SLIP_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    txtSlipCd.value = recordSet(0);
    txtSlipDate.value = dateFormat(recordSet(1));
    document.getElementById("selectCst").selectedIndex = cstIndexSearch(recordSet(2));
    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(3),database) + recordSet(4);

    recordSet.Close();
    recordSet = null;

    sqlDisplay("selectedIndex:" + obj.selectedIndex + "　value:" + obj.value);
  }
}

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;
  selectCstCd = document.getElementById("selectCst");
  document.getElementById("selectCst").onchange = function (){cstChange(this);}

  recordSet.Close();
  recordSet = null;
}

function cstChange(obj) {
  //顧客を選択した時の関数

  if(obj.selectedIndex==0){
    document.getElementById("addressDisplay").innerHTML = "";
    document.getElementById("sqlDisplay").innerHTML = "";
    alert("顧客を選択してください。");
  }else{
    var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;
    var recordSet = database.Execute(mySql);

    document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);

    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(SLIP_CD) from T07Slip";
  var recordSet = database.Execute(mySql);
  textClear();
  document.getElementById("addressDisplay").innerHTML = "";
  document.getElementById("sqlDisplay").innerHTML = "";
  slipDisplay();
  cstDisplay();
  txtSlipCd.value = recordSet(0) + 1;
  txtSlipDate.focus();
  return false;
}

function textClear() {
  //テキストボックスをクリアする関数
  txtSlipCd.value = "";
  txtSlipDate.value = "";
}

function dataInsert() {
  //データを追加する関数
  try{
    if(dataCheck(1)){
      var mySql = "insert into T07Slip values(" ;
      mySql = mySql + Number(txtSlipCd.value) + ", '";
      mySql = mySql + txtSlipDate.value + "', ";
      mySql = mySql + Number(selectCstCd.value);
      mySql = mySql +")";

      sqlDisplay(mySql);
      database.Execute(mySql);
      slipDisplay();
      alert("追加しました。");

    }
  }catch(error){
    alert(error.number + "\n" + error.description);
  }
}

function dataUpdate() {
  //データを更新する関数
  if(dataCheck(1)){
    var mySql = "update T07Slip set ";
    mySql = mySql + "SLIP_DATE = '" + txtSlipDate.value + "', ";
    mySql = mySql + "CST_CD = " + Number(selectCstCd.value);
    mySql = mySql + " where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    slipDisplay();
    alert("更新しました。");
  }
}

function dataDelete() {
  //データを削除する関数
  if(!confirm("本当に削除しますか？")){
    return ;
  }

  if(dataCheck(0)){
    var mySql = "delete from T07Slip where SLIP_CD = " + Number(txtSlipCd.value);
    sqlDisplay(mySql);
    database.Execute(mySql);
    textClear();
    document.getElementById("addressDisplay").innerHTML = "";
    slipDisplay();
    cstDisplay();
    alert("削除しました。");
  }
}

function dataCheck(flag){
  //データをチェックする関数
  var tempStr = "は必ず入力してください。";

  if (txtSlipCd.value == "") {
    alert("SLIP_CD" + tempStr);
    return false;
  }
  if (txtSlipCd.value.match(/[^0-9]/)) {
    alert("SLIP_CDには半角数字を入力してください！");
    txtSlipCd.focus();
    return false;
  }
  if (flag == 1 && txtSlipDate.value == "") {
    alert("SLIP_DATE" + tempStr);
    return false;
  }
  if (flag == 1 && !txtSlipDate.value.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
    alert("SLIP_DATEは「yyyy/mm/dd」形式で入力してください！");
    return false;
  }
  if (flag == 1 && selectCstCd.value == 0) {
    alert("CST_CD" + "は必ず選択してください。");
    return false;
  }

  return true;
}

function cstIndexSearch(cstCd){
  //顧客選択ボックスのIndexを検索する関数
  var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";
  var recordSet = database.Execute(mySql);
  var cstIndex = recordSet(0);
  return cstIndex;
}

【2】保存したら slip.html をダブルクリックしてWebブラウザで開きます。
★slip.html、base.css、slip.css、database.js、slip.js は必ず同じフォルダ内に置いてください。

【3】販売伝票が表示されました。CST_CDが選択ボックスに変わっています。

見やすいようにフォーム上の部品の位置は少し変えています。

【4】伝票選択ボックスから適当に選択してください。

【5】顧客名が選択ボックスで表示されました。この時選択ボックスのvalueにはCST_CDが入っています。追加、更新、削除ではvalueの値が使われます。

【6】顧客選択ボックスを適当に切り替えてください。

【7】住所が変わることを確認してください。

【8】顧客選択ボックスを使っても追加、更新、削除ができることを確認してください。

以上で選択ボックスを使って顧客名を表示することができました。

【解説】

(1)html側の変更
CST_CDをテキストボックスから選択ボックスに変えるため、プログラムで選択ボックスを出力する場所を「div」でマークしました。

CST_CD:<input type="text" name="txtCstCd" id="txtCstCd">
↓
CST_CD:<div id="customerDisplay"></div>

(2)関数cstDisplay()について
顧客選択ボックスを作成して表示し、イベントハンドラの設定をしています。選択ボックスを切り替えたときには関数cstChange()が呼び出されます。thisは選択ボックス自身の参照です。

document.getElementById("selectCst").onchange = function (){cstChange(this);}

(3)関数cstChange()について
CST_CDをもとにテーブルT04CustomerからTOWN_CDとADDRESSを調べています。
var mySql = "select TOWN_CD,ADDRESS from T04Customer where CST_CD = " + obj.value ;

次に調べたTOWN_CDとADDRESSを使って、関数addressReferで住所を表示しています。
document.getElementById("addressDisplay").innerHTML = addressRefer(recordSet(0),database) + recordSet(1);

テーブルT07SlipにはCST_CDしかないため、住所を表示するにはこのような手順が必要です。

(4)関数slipChange()について
プログラムで作成した顧客選択ボックスに対して、どの顧客を選択した状態にするか指定しているところです。

document.getElementById("selectCst").selectedIndex = cstIndexSearch(recordSet(2));

選択ボックスのIndexは0からはじまりますが、0は「顧客を選択してください。」という文字を指定していますので、顧客は1からの連番になります。ここでのポイントは選択ボックスのvalue（CST_CD）とIndexが必ずしも一致しないことです。そのため今選択しているIndexを調べる関数cstIndexSearch()を作りました。

(5)関数cstIndexSearch()について
この関数はCST_CDをもとに、顧客選択ボックスで今選択しているIndexを調べて値を返します。

まず顧客選択ボックスを作成している関数cstDisplay()のSQL文を見ると、CST_CDの昇順になっています。つまり選択ボックスの表示順は必ずCST_CDの小さい順です。
var mySql = "select CST_CD,CST_NAME from T04Customer order by CST_CD";

ではCST_CDが「7」の場合を例に詳しく見ていきましょう。関数cstIndexSearch()のSQL文は少し複雑です。

var mySql = "select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)";

これまで from の後ろにはテーブル名を書いていましたが、以下のように別のSQL文を含めることができます。これをサブクエリー(副問い合わせ)といいます。

このような場合は分解して考えてみましょう。まずfromの後ろのSQLです。CST_CDが「7」の場合はこのようなSQL文になります。
select CST_CD from T04Customer where CST_CD <= 7 order by CST_CD

このSQLを実行した結果です。抽出条件の「7」が一番最後になっていることに注意してください。抽出条件は必ず最後になります。この結果が from のテーブルの代わりになることをイメージしてください。

次はSQL全体を考えると、さきほどの結果をカウントしているだけです。
select count(CST_CD) from (select CST_CD from T04Customer where CST_CD <= " + cstCd + " order by CST_CD)

このSQL文を実行すると以下のようになります。

まとめるとCST_CDが「7」以下のレコードは7件です。抽出条件のCST_CDが必ず最後のレコードになりますから、最後のレコードが何番目か（何件あるか）を調べれば選択ボックスの表示順がわかりますので、それがIndexになります。

今回は顧客選択ボックスの表示順は7番目ということになり、Indexは「7」を返します。

今回はたまたまCST_CDとIndexが一致していますが、CST_CDが連番だとは限らないこともありますので、このような処理が必要になります。

例えばCST_CDが以下の順番だった場合、107はIndexでは「3」になります。
101、103、107、110、120

(6)関数dataCheck()について
CST_CDを顧客選択ボックスに変えたことで、データチェックの方法が少し変わりました。
未入力かとうかは "" ではなく 0 を使います。
selectCstCd.value == 0

また選択ボックスではvalueが使われるため値は必ず数値になるので、数値かどうかのチェックは不要になりました。

スポンサードリンク

JavaScript初心者入門講座TOPへ

JavaScript初心者入門講座

販売伝票 顧客名表示

販売伝票顧客名表示