フォームを送信前に確認

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

掲示板の書込にこのようなフォームの送信が使われています。通常はCGIファイルにデータを送信し、受信したデータをサーバに保存したり、加工して表示させますが、ここでは、受信したデータを表示する機能をもたせたHTMLファイルに送信しています。

例文

<form method="post" action="../datareceive.html" onSubmit="return checkSubmit()">
<input type="text" name="text1" value="データを送信します">
<input type="submit" value="送信する">
<input type="reset" value="クリア">
</form>

<script type="text/javascript">
function checkSubmit() {
	return confirm("送信しても良いですか？");
}
</script>

解説

　データを送信する前に、もういちど確認のためのダイアログを表示し、「ＯＫ」なら送信をします。
　実例のフォームではエラー表示を回避するためにsample2.html（このページ）に対してGETでフォームを送信しています。（URLの変化で確認してください）
　実際には例文の通りにCGIファイルを指定し、POSTでフォームを送信します。（GETでも送信はできますが、URLに送信内容が表示されます）

応用

　確認ダイアログの戻り値を取得して、それに応じた処理に分岐させることができます。
　例えば、年齢を尋ねてそれに応じたページに導くことができます。

<script type="text/javascript">
function checkAge() {
	result = confirm("あなたは１３才以上ですか？"); //確認メッセージに対する答えを取得
	if (result) {
		this.location.href = "http://www.yahoo.co.jp/";//OKならこのＨＰを表示
	} else {
		this.location.href = "http://kids.yahoo.co.jp/";//キャンセルならこのＨＰを表示
	}
}
</script>

　更に新しいウインドウを開いてからページを飛ばすこともできます。

<script type="text/javascript">
function checkAge() {
	result = confirm("あなたは１３才以上ですか？"); //確認メッセージに対する答えを取得
	if (result) {
		wURL = "http://www.yahoo.co.jp/";//OKならこのURLを取得
	} else {
		wURL = "http://kids.yahoo.co.jp/";//キャンセルならこのURLを取得
	}
	newWin = window.open(); //新規ウィンドウを開く
	newWin.location.href = wURL; //取得したURLを表示
}
</script>

戻る