<a href="JavaScript:;" name="btnInsert" id="linkMaxCd">最大値</a>
これまでせっかくhtmlとプログラムを分離してきたので、return を使って上手く解決する方法を考えてみましょう。
【1】「sample010.html」を以下のように更新してください。コピーして貼り付けてもかまいません。
<html>
<head>
<script type="text/javascript" src="sample010.js"></script>
<title>sample010</title>
</head>
<body>
都道府県マスター
<form name="form1">
PREF_CD:<input type="text" name="txtPrefCd" id="txtPrefCd">
<a href="" name="linkMaxCd" id="linkMaxCd">最大値</a>
PREF_NAME:<input type="text" name="txtPrefName" id="txtPrefName">
<input type="button" name="btnInsert" id="btnInsert" value="追加">
<input type="button" name="btnUpdate" id="btnUpdate" value="更新">
<input type="button" name="btnDelete" id="btnDelete" value="削除">
</form>
<div id="sqlDisplay"></div>
<textarea name="dataDisplay" id="dataDisplay" rows="20" cols="75"></textarea>
</body>
</html>
【2】「sample010.js」を以下のように更新してください。コピーして貼り付けてもかまいません。
var database;
var txtPrefCd;
var txtPrefName;
onload = init;
onunload = dbClose;
function init() {
//初期設定をする関数
txtPrefCd = document.getElementById("txtPrefCd");
txtPrefName = document.getElementById("txtPrefName");
txtPrefCd.onblur = function (){blur(this);}
txtPrefCd.onfocus = function (){focus(this);}
txtPrefName.onblur = function (){blur(this);}
txtPrefName.onfocus = function (){focus(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();
dataDisplay();
}
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 focus(obj){
obj.style.backgroundColor = "#ffff00";
}
function blur(obj){
obj.style.backgroundColor = "#ffffff";
}
function dataDisplay() {
//データを表示する関数
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
var tempText = "";
document.getElementById("dataDisplay").value = "";
while (!recordSet.EOF){
tempText = tempText + recordSet(0) + ":" + recordSet(1) + "\n";
recordSet.MoveNext();
}
document.getElementById("dataDisplay").value = tempText;
recordSet.Close();
recordSet = null;
}
function dataInsert() {
//データを追加する関数
try{
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "insert into T01Prefecture values(" + Number(txtPrefCd.value) + ",'" + txtPrefName.value + "')";
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("追加しました。");
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}
function dataUpdate() {
//データを更新する関数
if(dataCheck(txtPrefCd,"PREF_CD") && dataCheck(txtPrefName,"PREF_NAME")){
var mySql = "update T01Prefecture set PREF_NAME ='" + txtPrefName.value + "' where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("更新しました。");
}
}
function dataDelete() {
//データを削除する関数
if(dataCheck(txtPrefCd,"PREF_CD")){
var mySql = "delete from T01Prefecture where PREF_CD = " + Number(txtPrefCd.value);
sqlDisplay(mySql);
database.Execute(mySql);
dataDisplay();
alert("削除しました。");
}
}
function sqlDisplay(_mySql) {
//SQLを表示する関数
document.getElementById("sqlDisplay").innerHTML = "<p>" + _mySql + "</p>";
}
function dataCheck(obj,myStr){
//データをチェックする関数
if (obj.value == "") {
alert(myStr + "は必ず入力してください。");
return false;
}else{
return true;
}
}
function maxCd(){
//最大値を取得する関数
var mySql = "select max(PREF_CD) from T01Prefecture";
var recordSet = database.Execute(mySql);
txtPrefCd.value = recordSet(0) + 1;
txtPrefName.focus();
return false;
}
【3】保存したら sample010.html をダブルクリックしてWebブラウザで開きます。
★sample010.htmlとsample010.jsは必ず同じフォルダ内に置いてください。
【4】前回までと動作が同じだということを確認してください。
【解説】
まずhtml側の変更点です。前回は「href="JavaScript:;"」という部分にプログラムが残っていました。通常は「JavaScript:」の後にプログラムを書くのですが、「;」だけだと空文ですのでテキストリンクをクリックした時に何もしないということになります。
<a href="JavaScript:;" name="linkMaxCd" id="linkMaxCd">最大値</a>
↓
<a href="" name="linkMaxCd" id="linkMaxCd">最大値</a>
「href=""」を書かないとテキストがリンクにならないので必ず必要なのですが、そのままではクリックした時にページが移動してしまい都合が悪いです。
C:\sample\sample010.htmlが動いている場合、C:\sampleに移動します。
そこでJavaScript側で工夫が必要になります。関数init()の中にあるlinkMaxCdのイベントハンドラの設定にreturnを加えます。これで関数maxCd()を実行した時に何らかの値が返ってくることになります。もしfalseが返ってくると、テキストリンクをクリックしたことがキャンセルになります。つまりページが移動しません。
document.getElementById("linkMaxCd").onclick = function (){return maxCd();}
↓
document.getElementById("linkMaxCd").onclick = function (){return maxCd();}
あとは関数maxCd()に1文加えて、処理の最後にfalseを返すようにするだけです。
function maxCd(){
省略
return false;
}
これでhtmlからプログラムを分離でき、テキストリンクをクリックしてもページが移動しなくなりました。
