Lightbox Info Board : SQLの窓

選択オプションの復帰実装後

kubun	1
SendButton	送信


<?
require_once( "function.php" );

	for( $i = 1; $i <= 3; $i++ ) {
		if ( $_POST['kubun'] == $i ) {
			$Sel[$i] = 'selected';
			break;
		}
	}

?>
<SCRIPT language=JavaScript>
</SCRIPT>

<!-- *******************************************************
 画面定義
******************************************************** -->
<HTML>

<HEAD>
<?= HtmlCharset( "Shift_JIS" ); ?>
</HEAD>

<BODY>

<!-- *******************************************************
 送信フォーム
******************************************************** -->
<FORM name=frmMain method=post action=<?= $_SERVER['SCRIPT_NAME'] ?>>

	<SELECT name=kubun>
	<OPTION value=1 <?= $Sel[1] ?>>登録
	<OPTION value=2 <?= $Sel[2] ?>>修正
	<OPTION value=3 <?= $Sel[3] ?>>削除
	</SELECT>

	<INPUT name=SendButton type=submit value="送信">

</FORM>

</BODY>
</HTML>

<!-- *******************************************************
 ページロード時の初期処理
******************************************************** -->
<SCRIPT for=window event=onload language=JavaScript>

	window.focus();
	top.moveTo( 0, 0 );
	top.resizeTo( screen.width, screen.height - 32 );

</SCRIPT>

<?
	DispPost();
?>

フォーム処理を学ぶ為に

処理とあまり関係無い部分を外部ファイルにして、ソースコードをさらに簡潔にしようと思います。開発の場合、こういう外部ファイルでの切り出しはあまりおすすめできませんが、説明の為に行います。


<?
# **********************************************************
# 関数定義
# **********************************************************
require_once( "function.php" );

$Sel[$_POST['kubun']] = "selected";

require_once( "pagestart.php" );
?>

<FORM
	name=frmMain
	method=post
	action=<?= $_SERVER['SCRIPT_NAME'] ?>
	onSubmit='return CheckData();'
>

	<SELECT name=kubun>
	<OPTION value=1 <?= $Sel[1] ?>>登録
	<OPTION value=2 <?= $Sel[2] ?>>修正
	<OPTION value=3 <?= $Sel[3] ?>>削除
	</SELECT>

	<BR>
	<INPUT name=MainKey type=text>
	<INPUT name=SendButton type=submit value="送信">

</FORM>

<?
require_once( "pageend.php" );
# **********************************************************
# デバッグ用表示
# **********************************************************
DispPost();
?>

外部ファイルにするという事は、「ファイル数が増える」ということですからむやみに増やすと煩雑になり、管理がしにくくなります。外部ファイルにするガイドラインとしては、システムにおいて「再利用できる」という事を基本に考えます。最終的には「標準化」として組み込めるかどうかが重要になります。


include_path = ".;c:\php\includes"

PHP では外部ファイル検索用の include_path という設定が php.ini の中で指定できるようになっており、全ての PHP ソースコードから同一の外部ファイルを取り込めるようにする事ができます。

フォーム送信とJavaScript

Web アプリケーションでほぼ常識的なテクニックですが、FORM タグの中に onSubmit イベントを記述して、フォームの送信をスクリプトでコントロールする事ができます。

まずは、画面に入力フィールドを追加します。

kubun	1
MainKey
SendButton	送信

Array
(
    [1] => selected
)

フォームのイベントは、フォーム内の submit 属性を持ったボタンをクリックした時に発生するイベントで、以下の書き方によってスクリプト内の内容に応じてフォームの送信をキャンセルする事ができます。


<SCRIPT language=JavaScript>
function CheckData() {

}
</SCRIPT>


<FORM
	name=frmMain
	method=post
	action=<?= $_SERVER['SCRIPT_NAME'] ?>
	onSubmit='return CheckData();'
>

CheckData 関数の中はなにも記述されていませんが、この状態ではフォームは送信されます。しかし、以下のように記述するとフォームが送信される事はありません


<SCRIPT language=JavaScript>
function CheckData() {
	return false;
}
</SCRIPT>

これを利用して、画面での入力をスクリプトでチェックして、エラーがなければフォームを送信するという処理を追加してみます


<SCRIPT language=JavaScript>
function CheckData() {

	if ( document.all.item("MainKey").value == "" ) {
		alert( "データを入力して下さい" );
		document.all.item("MainKey").focus();
		return false;
	}

	return true;
}
</SCRIPT>

ちなみにVBSCriptでの記述方法を以下に示します


<SCRIPT language=VBScript>
function frmMain_onsubmit()

	if document.all.item("MainKey").value = "" then
		alert( "データを入力して下さい" )
		document.all.item("MainKey").focus
		frmMain_onsubmit = false
		exit function
	end if

	frmMain_onsubmit = true

end function
</SCRIPT>


<FORM
	name=frmMain
	method=post
	action=<?= $_SERVER['SCRIPT_NAME'] ?>
>

HTML 上のオブジェクトの参照

JavaScript で処理を記述する際には、当然HTML上に存在するオブジェクトを参照する事になります。入力フィールドの中の文字列を参照したいのであれば、オブジェクトを利用しなければなりません。

ここでは、これから以降 Microsoft 特有の参照方法で通したいとおもいます。クロスブラウザを作りたい人は、それぞれのブラウザを研究して下さい。これから書く方法は、IE 上で最も失敗しにくい方法です。

document.all.item( "オブジェクト名" )

document : オブジェクト

all : コレクション

item : コレクションのメソッド

これには省略形式もありますが、必ずこの書き方で書くという事を「標準」として定めます。

コレクションと言うのは、オブジェクトのグループの事です。all というコレクションは、そのページで書かれたオブジェクトをほぼ全て参照する事がてきます。使用方法から見れば、連想配列とそんなに違いません。

オブジェクトの数は、「document.all.length」で参照できます。

pagestart.php と pageend.php

何度も言うようですが、説明に必要が無くなった部分をコードサンプルより省く為に別ソースにしています。こういう方法では無く、実際は画面表示部分、つまり HTML 部分を一つのソースコードにするのが正しい方法です。

pagestart.php


<SCRIPT language=JavaScript>

// **********************************************************
// クライアント関数定義
// **********************************************************
function CheckData() {

	if ( document.all.item("MainKey").value == "" ) {
		alert( "データを入力して下さい" );
		document.all.item("MainKey").focus();
		return false;
	}

	return true;
}

</SCRIPT>

<!-- *******************************************************
 画面定義
******************************************************** -->
<HTML>
<HEAD><?= HtmlCharset( "Shift_JIS" ); ?></HEAD>
<BODY>

pageend.php


</BODY>
</HTML>

<!-- *******************************************************
 ページロード時の初期処理
******************************************************** -->
<SCRIPT for=window event=onload language=JavaScript>

	window.focus();
	top.moveTo( 0, 0 );
	top.resizeTo( screen.width, screen.height - 32 );

</SCRIPT>