この方法のメリットは、クライアントでできることはクライアントで行うことで、サーバー側の負担が軽くなることです。またいちいちサーバーに送らなくてもいいので、処理スピードも速くなります。
【1】sample010 フォルダをコピーして sample012 フォルダを作成します。
【2】calc.php の変更はありません。 calc.html を変更し calc.js を新たに作成します。
＊「\」はWindowsではエンマークのことです。
保存先 C:\phpdev\www\test\sample012
ファイル名 calc.html
<html>
<head>
<script type="text/javascript" src="calc.js"></script>
<title>calc.html</title>
</head>
<body>
<form name="form1" action="calc.php" method="post">
<input type = "text" name = "txtA" id = "txtA">
<select name="selOpe" size=1>
<option value = "＋">＋</option>
<option value = "－">－</option>
<option value = "×">×</option>
<option value = "÷">÷</option>
</select>
<input type = "text" name = "txtB" id = "txtB"> = ?
<br>
<input type = "submit" value = "計算">
<input type = "reset" value = "クリア">
</form>
</body>
</html>
保存先 C:\phpdev\www\test\sample012
ファイル名 calc.php
<html>
<head>
<title>calc.php</title>
</head>
<body>
<?php
//値を取得
$a = $_POST['txtA'];
$b = $_POST['txtB'];
$ope = $_POST['selOpe'];
//セレクトボックスによって処理を変える
switch ($ope) {
case "＋":
$answer = $a + $b;
break;
case "－":
$answer = $a - $b;
break;
case "×":
$answer = $a * $b;
break;
case "÷":
$answer = $a / $b;
break;
default:
break;
}
//計算結果を表示
print ($a." ".$ope." ".$b." = ".$answer."\n");
?>
<br />
<br />
<a href="#" onclick="history.back(); return false;">前の画面へ戻る</a>
</body>
</html>
保存先 C:\phpdev\www\test\sample012
ファイル名 calc.js
var txtA;
var txtB;
onload = init;
function init() {
//初期設定をする関数
txtA = document.getElementById("txtA");
txtB = document.getElementById("txtB");
document.form1.onsubmit = function (){return ( dataCheck(txtA.value, "txtA") && dataCheck(txtB.value, "txtB") );}
}
function dataCheck(str, name){
//データをチェックする関数
if (str.length == 0 || str.match(/[^0-9]/)) {
alert(name + " は半角数字を入力してください。");
return false;
}
return true;
}
＊上記のプログラムはページの都合上、インデント（字下げ）が半角スペース2つになっていますが、実際には半角スペース4つにするのが好ましいです。インデントはプログラムの動作には影響しません。
【3】C:\phpdev にある 2K-NT-XP-phpdev_start.bat をダブルクリックして、phpdev を起動します。
準備ができたら作成したPHPプログラムを実行してみましょう。
【4】ブラウザのアドレスに http://localhost/test/sample012/calc.html と入力し、実行します。
【5】calc.html の画面が表示されました。
【6】テキストボックスに何も入力しないで、そのまま「計算」ボタンをクリックします。
【7】メッセージ（アラート）が表示されました。このメッセージは JavaScript によるもので、 calc.php はまだ動いていません。
【8】「OK」をクリックしてメッセージを閉じます。
【9】テキストボックスにわざと「文字を含んだ数字」を入力した場合、メッセージが表示されます。
【10】1つ目のテキストボックスはOKですが、2つ目の値が不適切なのでメッセージが表示されます。
【11】2つのテキストボックスの値が適切なら、計算結果が表示されます。ここでようやく calc.php が動きました。
【12】値やセレクトボックスをいろいろ変えて、動作を確認してください。
【解説】
■calc.php側
sample010 からの変更はありません。
■calc.html側
(1)別ファイルの JavaScript を読み込む設定
<script type="text/javascript" src="calc.js"></script>
(2)テキストボックスに id を設定
<input type = "text" name = "txtA" id = "txtA">
<input type = "text" name = "txtB" id = "txtB">
■calc.js側
(1)HTMLを読み込んだ後に、init関数を呼び出しています。init関数では初期設定を行っています。
onload = init;
(2)テキストボックスの参照を取得しています。このために id を付けました。
txtA = document.getElementById("txtA");
txtB = document.getElementById("txtB");
(3)「計算」ボタンのタイプはサブミットです。このボタンをクリックしたときの処理を設定しています。
document.form1.onsubmit = function (){return ( dataCheck(txtA.value, "txtA") && dataCheck(txtB.value, "txtB") );}
return の部分が重要です。クリックした時にdataCheck()関数を呼び出します。dataCheck()関数はデータが適切なら「true」、不適切なら「false」を返します。引数の txtA.value はテキストボックスの値です。
txtA.value と txtB.value をチェックして、両方とも true の場合のみ、PHPに処理が移ります。
○ true && true
× true && false
(4)dataCheck()関数はPHPの時とほとんど同じことをしています。str.lengthで文字の長さがわかります。
JavaScriptについてはJavaScript初心者入門講座で詳しく解説しています。
【ワンポイント】
sample011 の calc.php を使っても同じように動きます。その場合、JavaScript で入力チェック済みですので PHP で入力エラーが出ることはないはずです。
余裕がある人はsample012 フォルダをコピーして sample013 フォルダを作り、calc.php だけ sample011 のものと差し替えて試してみると理解が深まります。
HTML → JavaScript → PHP
