同一画面での処理分割

サーバ側のエラー処理を実装したソースコード

kubun	1
MainKey
SendButton	送信

<?
require_once( "function.php" );
# **********************************************************
# 画面表示前のサーバ側の処理
# **********************************************************
	for( $i = 1; $i <= 3; $i++ ) {
		if ( $_POST['kubun'] == $i ) {
			$Sel[$i] = 'selected';
			break;
		}
	}

	$_POST['MainKey'] = trim( $_POST['MainKey'] );
	if ( $_POST['MainKey'] == '' ) {
		SetErrMessage( '空白文字が入力されました' );
	}

# **********************************************************
# クライアント側に表示される画面
# **********************************************************
?>
<SCRIPT language=JavaScript>
function CheckData() {

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

	return true;
}
</SCRIPT>

<? 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 value="<?= $_POST['MainKey'] ?>">

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

	<BR><?= $ErrMessage ?>

</FORM>
<? require_once( "pageend.php" ); ?>

<?
	DispPost();
?>

GET か POST か

サーバ側の処理では、常に２通りの場合を考えてプログラミングする必要があります。サーバ側のスクリプトを呼び出すには具体的に二つの方法があり、具体的にサーバ側のスクリプト内での環境も変わるからです。

GET でサーバ側のスクリプトが呼び出される場合はいくつかありますが、代表的なのは、HTML のアンカータグの href 属性で書かれるURL 記述による呼び出しです。処理の状態としては、「初期画面」と考えると良いと思います。

この場合、スクリプトに渡されるデータは　URL 記述内に含まれており、受け取る変数も決まっています。

script.php?param=1

$_GET['param'] の内容が 1 となる

これと違って POST でサーバ側のスクリプトが呼び出されるのは、HTML の　フォームタグで method 属性を "POST" とした時です。この場合、スクリプトに渡されるデータは画面上に定義されたエレメントにより渡され、受け取る変数も $_GET では無く $_POST となります。

そう考えると、「サーバー側でのエラーチェック」では、その違いを考慮していないので、初期画面でエラーメッセージが出てしまいます。

以下のように修正して下さい

if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
	$_POST['MainKey'] = trim( $_POST['MainKey'] );
	if ( $_POST['MainKey'] == '' ) {
		SetErrMessage( '空白文字が入力されました' );
	}
}

処理しないエレメントは無効( 使用不可 )にする

グループ(1)

グループ(2)

この状態では、グループ(1) は使用可能で、グループ(2) は使用不可になっています。HTML でこの状態を実現するには、エレメントに disabled 属性を書きます。しかし、使用可能状態を切り替える事を目的としていますので、以下のような定義を行います。

グループ(1)<BR>
<SELECT name=kubun <?= $GROUP1 ?>>
<OPTION value=1 <?= $Sel[1] ?>>登録
<OPTION value=2 <?= $Sel[2] ?>>修正
<OPTION value=3 <?= $Sel[3] ?>>削除
</SELECT>

<BR>
<INPUT name=MainKey type=text <?= $GROUP1 ?>>
<INPUT name=SendButton type=submit value="送信" <?= $GROUP1 ?>>
<BR>
<?= $ErrMessage ?>

<HR size=1 color=black>

グループ(2)<BR>
<INPUT name=Data1 type=text <?= $GROUP2 ?>><BR>
<INPUT name=Data2 type=text <?= $GROUP2 ?>><BR>
<INPUT name=SendButton type=submit value="送信" <?= $GROUP2 ?>>

そして、「初期画面」の場合は、グループ(1) が使用可能で、それ以外の時はグループ(2) が使用可能になるように PHP コードを以下のように記述します。

if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	$GROUP1 = '';
	$GROUP2 = 'disabled';
}
else {
	$GROUP1 = 'disabled';
	$GROUP2 = '';

	$_POST['MainKey'] = trim( $_POST['MainKey'] );
	if ( $_POST['MainKey'] == '' ) {
		SetErrMessage( '空白文字が入力されました' );
	}
}

これで「一見」目的は達成されたかのように見えますが、実はWebアヌプリケーションとしては、問題が山積み状態です。しかし、それを一つ一つ考えて行くより解決方法を示しますので、その結果を考察したほうが良いです。

隠しフィールドで、状態を示して画面をコントロールする

このままでは、初期画面からスペース文字を入力してエラーとなった場合に再入力ができなくなってしまいます。ですから、さらに「現在の処理は何か」を示すデータが必要になります。

if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	$CurrentGROUP = 1;
}
else {
	$CurrentGROUP = 2;

	if ( $_POST['Group'] == 1 ) {
		$_POST['MainKey'] = trim( $_POST['MainKey'] );
		if ( $_POST['MainKey'] == '' ) {
			SetErrMessage( '空白文字が入力されました' );
			$CurrentGROUP = 1;
		}
	}
}

if ( $CurrentGROUP == 1 ) {
	$GROUP1 = '';
	$GROUP2 = 'disabled';
}
if ( $CurrentGROUP == 2 ) {
	$GROUP1 = 'disabled';
	$GROUP2 = '';
}

<INPUT name=Group type=hidden value="<?= $CurrentGROUP ?>">

サーバの処理は、とりあえずこれでうまく行きますがクライアントのスクリプトも変更する必要があります。今の状態では、グループ(2)の送信ボタンをクリックすると、グループ(1)のデータのチェックしてしまいます。その結果、無効のフィールドへフォーカスを移そうとしてエラーになってしまいます。

onSubmit イベントは、1つのフォームに対して一つしかかけませんので、どちらのボタンをクリックしたのか知る必要があります。それは以下のようにして実現します。(フォームをグループ毎にすれば解決しますが、楽な方法は必要な時に自分の判断で使用します)

<SCRIPT language=JavaScript>
var ClickedButton;
function CheckData() {

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

	return true;
}
</SCRIPT>

<INPUT
	name=SendButton
	type=submit
	value="送信"
	onClick='ClickedButton=1;'
	<?= $GROUP1 ?>
>
<INPUT
	name=SendButton
	type=submit
	value="送信"
	onClick='ClickedButton=2;'
	<?= $GROUP2 ?>
>

テキストフィールドの disabled 属性を readonly 属性に変更する

理由は簡単、disabled では、送信した時にデータがサーバにやって来ません。これでは、入力されたデータの復帰もままなりません。$GROUP1 と $GROUP2だけでは足りませんので、テキストフィールド専用の$GROUP1text と $GROUP2Ttext を作成します。

テキストフィールドの内容は、送信後も残るように PHP 変数を value 属性に埋め込みます

if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	$CurrentGROUP = 1;
}
else {
	$CurrentGROUP = 2;

	if ( $_POST['Group'] == 1 ) {
		$_POST['MainKey'] = trim( $_POST['MainKey'] );
		if ( $_POST['MainKey'] == '' ) {
			SetErrMessage( '空白文字が入力されました' );
			$CurrentGROUP = 1;
		}
	}
}

if ( $CurrentGROUP == 1 ) {
	$GROUP1 = '';
	$GROUP1text = '';
	$GROUP2 = 'disabled';
	$GROUP2text = 'readonly';
}
if ( $CurrentGROUP == 2 ) {
	$GROUP1 = 'disabled';
	$GROUP1text = 'readonly';
	$GROUP2 = '';
	$GROUP2text = '';
}

<INPUT name=Group type=hidden value="<?= $CurrentGROUP ?>">

グループ(1)<BR>
<SELECT name=kubun <?= $GROUP1 ?>>
<OPTION value=1 <?= $Sel[1] ?>>登録
<OPTION value=2 <?= $Sel[2] ?>>修正
<OPTION value=3 <?= $Sel[3] ?>>削除
</SELECT>

<BR>
<INPUT
	name=MainKey
	type=text
	value="<?= $_POST['MainKey'] ?>"
	<?= $GROUP1text ?>
>
<INPUT
	name=SendButton
	type=submit
	value="送信"
	onClick='ClickedButton=1;'
	<?= $GROUP1 ?>
>
<BR>
<?= $ErrMessage ?>

<HR size=1 color=black>

グループ(2)<BR>
<INPUT
	name=Data1
	type=text
	value="<?= $_POST['Data1'] ?>"
	<?= $GROUP2text ?>
><BR>
<INPUT
	name=Data2
	type=text
	value="<?= $_POST['Data2'] ?>"
	<?= $GROUP2text ?>
><BR>
<INPUT
	name=SendButton
	type=submit
	value="送信"
	onClick='ClickedButton=2;'
	<?= $GROUP2 ?>
>

コンボボックスのデータをグループ(2)へ引き渡すには

SELECT エレメントも disable 属性の為、サーバへデータがやって来ません。そこで、隠しフィールドを作ってグループ(2)から常に選択したデータがやって来るようにします。

if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	$CurrentGROUP = 1;
}
else {
	$CurrentGROUP = 2;

	if ( $_POST['Group'] == 1 ) {
		$_POST['MainKey'] = trim( $_POST['MainKey'] );
		if ( $_POST['MainKey'] == '' ) {
			SetErrMessage( '空白文字が入力されました' );
			$CurrentGROUP = 1;
		}
	}

	if ( $CurrentGROUP == 2 ) {
		$HideElement = '<INPUT name=kubun type=hidden value="';
		$HideElement .= $_POST['kubun'];
		$HideElement .= '">';
	}
}

<INPUT name=Group type=hidden value="<?= $CurrentGROUP ?>">
<?= $HideElement ?>

グループ処理を関数にする

似たような処理が複数発生し、パターン化できます。こんな時は迷わず関数に
してしまいましょう

# **********************************************************
# グループ処理
# **********************************************************
function SetGroup( $Group ) {

	switch ( $Group ) {
		case 1:
			$GLOBALS['CurrentGROUP'] = 1;
			$GLOBALS['GROUP1'] = '';
			$GLOBALS['GROUPtext1'] = '';
			$GLOBALS['GROUP2'] = 'disabled';
			$GLOBALS['GROUPtext2'] = 'readonly';
			break;
		case 2:
			$GLOBALS['CurrentGROUP'] = 2;
			$GLOBALS['GROUP1'] = 'disabled';
			$GLOBALS['GROUPtext1'] = 'readonly';
			$GLOBALS['GROUP2'] = '';
			$GLOBALS['GROUPtext2'] = '';
			break;
	}

}

グループ(2) のから送信時は、グループ(1) へ画面遷移させる

if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	$CurrentGROUP = 1;
}
else {
	$CurrentGROUP = 2;

	if ( $_POST['Group'] == 1 ) {
		$_POST['MainKey'] = trim( $_POST['MainKey'] );
		if ( $_POST['MainKey'] == '' ) {
			SetErrMessage( '空白文字が入力されました' );
			$CurrentGROUP = 1;
		}
	}

	if ( $_POST['Group'] == 2 ) {
		$CurrentGROUP = 1;
	}

	if ( $CurrentGROUP == 2 ) {
		$HideElement = '<INPUT name=kubun type=hidden value="';
		$HideElement .= $_POST['kubun'];
		$HideElement .= '">';
	}
}