スポンサードリンク

顧客マスター 性別表示

今回はラジオボタンを使って性別を表示する方法を学びます。

前回までの顧客マスターを見ると、性別を表すSEX_CDが数字になっているため、男性か女性かわかりません。

javascript-127.gif

これはデータベースAccessから取り出した値をそのまま表示しているからです。

javascript-131.gif

性別を表示するにはいろんな方法があります。データベースには性別マスターがあるため、顧客のデータを取得するときに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】顧客マスターを開いたら、顧客選択ボックスから女性の名前を選択してください。

javascript-128.gif

性別が女性になっています。


【4】次は男性の名前を選択してください。

javascript-129.gif

性別が男性になっています。


【5】顧客選択ボックスをいろいろ切り替えて、動作を確認してください。


【6】「最大値」をクリックしたときは、初期値として「男」が選択されます。

javascript-130.gif


【解説】

(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;
}


スポンサードリンク






JavaScript初心者入門講座TOPへ