スポンサードリンク

PHP フォームに入力された値をJavaScriptでチェックする方法。

今回はサーバーのPHPに送る前に、クライアントのブラウザで入力チェックする方法を解説します。ブラウザ側の処理には JavaScript を使っています。

この方法のメリットは、クライアントでできることはクライアントで行うことで、サーバー側の負担が軽くなることです。またいちいちサーバーに送らなくてもいいので、処理スピードも速くなります。


【1】sample010 フォルダをコピーして sample012 フォルダを作成します。

php-98.gif


【2】calc.php の変更はありません。 calc.html を変更し calc.js を新たに作成します。

php-99.gif

*「\」は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-02.gif

準備ができたら作成したPHPプログラムを実行してみましょう。


【4】ブラウザのアドレスに http://localhost/test/sample012/calc.html と入力し、実行します。


【5】calc.html の画面が表示されました。

php-100.gif


【6】テキストボックスに何も入力しないで、そのまま「計算」ボタンをクリックします。

php-101.gif


【7】メッセージ(アラート)が表示されました。このメッセージは JavaScript によるもので、 calc.php はまだ動いていません。

php-102.gif


【8】「OK」をクリックしてメッセージを閉じます。

php-103.gif


【9】テキストボックスにわざと「文字を含んだ数字」を入力した場合、メッセージが表示されます。

php-104.gif


【10】1つ目のテキストボックスはOKですが、2つ目の値が不適切なのでメッセージが表示されます。

php-105.gif


【11】2つのテキストボックスの値が適切なら、計算結果が表示されます。ここでようやく calc.php が動きました。

php-106.gif


【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 


スポンサードリンク






PHP初心者入門講座TOPへ