スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

例えば、PHPでフォームを構築する場合など複数のボタンを設置して、それぞれサーバ処理を分けたい場合があります。

具体的には、メールフォームで「送信してもよろしいですか?」といった確認画面では、「入力フォームに戻る」と「送信する」ボタンがあり、それぞれでサーバ処理を分岐させます。
複数のsubmitボタンがある場合に、サーバ側でどのボタンが押されたかを取得したいときに、どのような処理が適当なのかを考えてみます。

ちなみにこれから示す全てのコードは比較のために簡略化してあり、動作確認はとっていません。

JavaScriptでポストするデータを分ける

これまで私は、主にJavaScriptでPOSTするデータを操作し、サーバ側でその内容を判定することで、処理を分岐していました。

<a href="javascript:void(0);"><img onclick="back(); return false;" src="back.jpg" alt="戻る" /></a>
<a href="javascript:void(0);"><img onclick="send(); return false;" src="send.jpg" alt="送信" /></a>

JSの処理の中身は省略しますが、関数back()とsend()で異なるパラメータを設定してsubmitします。そうすると、そのデータがPOSTされるので、PHP側でデータ内容を判定して処理を分岐すればいいわけです。
JSではPOSTで送信するデータを自由に加工できるので、この方法では複雑な処理も可能になります。

しかし、それぞれHTML、JS、PHPを実装する必要があり、どれか一つに記入ミスがあるとバグになり、また、デバッグするにもソースが煩雑になると解析がめんどくさいです。

逆にデータ加工が必要ない場合は、HTMLからsubmitするだけなので、JSは不要です。そこで、JSを使わない、ボタン判定方法を考えてみました。

フォームのsubmitをnameで判別する

JavaScriptを使わずに、HTMLのみで押下されたボタンのPOST情報を判別する方法です。

<input type="submit" name="back" value="戻る" />
<input type="submit" name="send" value="送信" />

このように記述することで、PHPでは以下のような分岐が可能です。

if($_POST['back']){
	echo '「戻る」ボタンが押されました!';
}
if($_POST['send']){
	echo '「送信」ボタンが押されました!';
}

2つのボタンが同時に押され、両方ポストされることはないので、上記の方法で分岐可能です。

ただ、この場合だと、ボタンに画像が指定できないので、デザインがダサくなります。
無理やりCSSの背景画像を置いて装飾することは可能ですが、ボタン毎にスタイルを用意したり、ロールオーバー画像も指定するとなると、どうもスマートじゃないですね。

フォームのimageをnameで判別する

フォームをsubmitする方法に、フォームのimageを利用する方法があります。

<input type="image" name="back" src="back.jpg" alt="戻る" />
<input type="image" name="send" src="send.jpg" alt="送信" />

imageタイプのsubmitでは、画像のどの部分がクリックされたかを、x座標とy座標がPOSTされます。つまり、戻るボタンが押された場合、画像の左上を基準としてx軸は「$_POST[‘back_x’]」、y軸は「$_POST[‘back_y’]」という2つのデータが渡されます。

そこで、先ほどと同様に、データの有無により以下のようなボタン判定が可能なわけです。

if($_POST['back_x']){
	echo '「戻る」ボタンが押されました!';
}
if($_POST['send_y']){
	echo '「送信」ボタンが押されました!';
}

この場合、デザインに応じた画像設置も用意ですし、マウスオンの設置も可能です。

あまりこのような例を見たことがないので、正しいかどうか不安ですが。。。

こう見ると、POSTだけでもデータ送信の方法にはいろいろあるんですね。
他にもボタンを判定する方法はありますが、それぞれ長所と短所があるので、懸案に応じて適材適所といったところでしょうか。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search