フォームを送信前に確認

赤字: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>

解説

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

応用

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

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

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

<script type="text/javascript">
function checkAge() {
	result = confirm("あなたは13才以上ですか?"); //確認メッセージに対する答えを取得
	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>

戻る