にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

「OK/キャンセル」ダイアログを表示して確認・分岐する方法 [機能]

JavaScriptを使って「OK」ボタンと「キャンセル」ボタンのあるダイアログを表示して閲覧者に確認を取り、その結果に応じて処理を分岐させるには、confirmメソッドを使います。confirm(‘メッセージ’); のように記述して使い、返されたtrue/falseの値をチェックして条件分岐を作れば良いだけです。

「OK/キャンセル」ダイアログを表示して確認・分岐する方法

JavaScriptでは、[OK]ボタンと[キャンセル]ボタンの2つのボタンがあるダイアログボックスを表示して、ユーザに可否を選択させることができます。
例えば、ページを移動する前に移動しても良いかどうか確認するとか、何かを送信する際に本当に送信しても良いかどうか確認するとか、そんな感じのことに使うと便利です。

以下のサンプルは、ボタンをクリックすると移動しても良いかどうかの確認ダイアログが表示されます。

上記のボタンクリックで表示される確認ダイアログで、[OK]をクリックすれば本当に移動(※)し、[キャンセル]をクリックすれば移動せずにアラートボックスを表示(※)します。

※移動する場合の移動先は、当サイトのHOMEページです。
※アラートボックスは、[OK]ボタン1つだけの確認ダイアログです。詳しくは「OKボタン1つだけのアラートボックスを表示する方法」をご参照下さい。

確認ダイアログから返される値がtrueかfalseかをif文で判別するだけ

このように、「OK」ボタンと「キャンセル」ボタンのある確認ダイアログを表示するには、confirmメソッドを使います。
例えば、以下のようにして使います。

var res = confirm("移動してもいいですかー?");

上記の場合、「移動してもいいですかー?」というメッセージと共に、[OK]ボタンと[キャンセル]ボタンの2つがある確認ダイアログが表示されます。confirmメソッドは、ユーザが押したのが[OK]ボタンならtrueを、[キャンセル]ボタンならfalsを返します。なので、上記ではユーザが選択した結果(true/false)が変数resに格納されます。

ユーザの選択に応じて処理を分岐するには、if~else文を使えばよいでしょう。まずは説明のために冗長に記述したJavaScriptソースを掲載します。

JavaScriptソース(冗長)

function MoveCheck {
	var res = confirm("移動してもいいですかー?");
	if( res == true ) {
		// OKなら移動
		window.location.href = "https://www.nishishi.com/";
	}
	else {
		// キャンセルならアラートボックスを表示
		alert("移動をやめまーす。");
	}
}

上記のJavaScriptソースでは、MoveCheckという名称の関数を作っています。この関数では、confirmメソッドで表示する確認ダイアログの返値を変数resに格納して(2行目)、変数resの値がtrueだったらページを移動、falseだったらアラートボックスを表示させています。ページを移動する方法については、「ページを移動させたり、現在URLを構成部分別に得る方法」をご参照下さい。

上記のソースはちょっと冗長ですね。trueかfalseを1回判別するだけなのですから、confirmメソッドの返値をわざわざ変数に入れる必要はありません。また、if文の判定式の中でわざわざtrueと比較する必要もありません。なので、以下のように書けば少しソースが短くなります。

JavaScriptソース

function MoveCheck() {
	if( confirm("移動してもいいですかー?") ) {
		window.location.href = "https://www.nishishi.com/";
	}
	else {
		alert("移動をやめました。");
	}
}

上記のJavaScriptソースでも先程と同じようにMoveCheckという名称の関数を作っています。2行目では「confirmメソッドで確認ダイアログを表示」と「OKがクリックされたら」という条件判定を同時に行っています。

ここで作成した関数を呼び出すHTMLは、例えば以下のように記述します。

HTMLソース

<input type="button" value="移動しちゃうかもー?" onclick="MoveCheck();">

ここではonclick属性を使って、クリックされたときにMoveCheck関数が実行されるようにしています。

OKかCancelかの選択をユーザにさせたいときに

こんな感じで、[OK]ボタンと[キャンセル]ボタンを使った確認ダイアログを簡単に表示できます。
送信フォームの送信ボタンに記述しておいて、「キャンセル」がクリックされたらreturn false;を実行して送信しないようにするとか、そういうことに活用すると良さそうな気がします。

なお、PDFファイルへのリンクをクリックしたときに、「移動先はPDFだけどほんとにいいですかー?」というような確認を表示させる方法を、All Aboutで記事にしていますので、そちらもよろしければご参照下さい。
→「PDFにリンクする際などに便利かも リンク移動前に確認させる方法

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---