2014年09月13日

FORM の送信と JavaScript

WEB アプリケーションでサーバーへデータを送信する際、操作している人に確認を求める必要がある場合があります。一般的な WEB アプリケーションでは、サーバ側でチェックしてエラーがあればその内容を表示しますが、それは不特定多数を対象にしているので、失敗を可能な限り避けたいのであって、決して操作している人には親切な仕様ではありません。

信頼された WEB アプリケーションであれば、クライアントの環境や運用ルールも事前に話し合っているので、できる限り操作する人に親切な仕様として、送信前に可能なチェックを行います。チェックが全て通った後に、再度送信して良いかを尋ねるのが一般的です。

FORM を送信する

FORM を送信する方法はいくつかありますが、オーソドックスなのは FORM の中に送信用のボタンを配置する方法です。しかし、JavaScript を使うのであれば、必ずしも 送信用のボタンは必要ありません。

その場合、FORM オブジェクトに対して submit メソッドを実行します。

オブジェクトの参照では、FORM 要素に name 属性が設定されておれば、『document.名前』で参照可能です。もちろん、他の参照方法でも可能で、document.名前 は比較的古い方法です。

JavaScript のイベント

要素の中に直接書くイベントは、JavaScript の『無名関数』と同じものとなります。通常、インラインで書く場合は長い処理を書かずに関数を呼び出して処理します。関数は、別の場所に定義されるわけですが、それらと同等な処理が、無名関数によって行う事ができ、関数名を使わずに処理が可能です。

一般的な JavaScript のソースコードで、無名関数を使う事はあまりありませんが、jQuery を使う場合は、jQuery のイベント定義とし無名関数を使う事のほうが一般的となりますFORM 要素の中に書く onsubmit イベントは注意

onsubmit='return 関数名()' のように、最初に return がある事が重要です。ここは、無名関数なので、無名関数からシステムに結果を返す必要があるからです。この結果が false であれば、システムはフォームを送信しません

onsubmit イベント より先に発生する onclick イベント

onsubmit イベントは、操作的に最後に処理されます。明確なのは、ボタンをクリックしてから onsubmit イベントが実行されるという事です。ですから、ボタンのインラインで変数に値をセットしておけば、onsubmit イベントではその値を使っていろいろな処理分岐が行えます




<script>
function submitForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.frm.submit();
}

function submitForm2() {
	if ( !confirm( "Submit ボタンで送信しますか?" ) ) {
		return false;
	}
	return true;
}
</script>
<form name="frm"
	id="my_form"
	target="iframe_win"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	value="JavaScript送信"
	onclick='submitForm();'>
<br>
<iframe id="iframe_win"
	name="iframe_win"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form onsubmit='return submitForm2()'
	target="iframe_win2"
	action="http://toolbox.winofsql.jp/info2.php">
	<input type="submit"
		value="submitボタン送信">
</form>
<iframe id="iframe_win2"
	name="iframe_win2"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form id="js_form"
	target="iframe_win3"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	id="my_button"
	value="無名関数イベント登録">
<script>
// WEB ページでは通常上から下へど実行されるので、
// コントロールの下で無いと参照できません
document.getElementById("my_button").onclick = function() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.getElementById("js_form").submit();
};
// 無名関数は、INPUT 要素内で onclick イベントで関数を呼び出すのと同等です
</script>
<br>
<iframe id="iframe_win3"
	name="iframe_win3"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>


posted by at 2014-09-13 15:37 | JavaScript | このブログの読者になる | 更新情報をチェックする