Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

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

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

以下のサンプルは、ボタンをクリックすると移動しても良いかどうかの確認ダイアログが表示されます。「OK」をクリックすれば本当に移動し、「キャンセル」をクリックすれば移動しません。(※移動する場合の移動先は、当サイトのHOMEページ。)

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

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

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

ユーザの選択に応じて処理を分岐させるには、if文を使えばよいでしょう。
先ほどのサンプルは、以下のようなJavaScriptで作っています。

<script type="text/javascript"><!--
   function MoveCheck {
      // 確認ダイアログを表示
      var res = confirm("移動してもいいですかー?");
      // 選択結果で分岐
      if( res == true ) {
         // OKなら移動
         window.location = "http://www.nishishi.com/";
      }
      else {
         // キャンセルならダイアログ表示
         alert("移動をやめまーす。");
      }
   }
// --></script>

※「//」で始まる部分はコメントなので、実際には書かなくて良いです。(書いても良いです。)

上記のJavaScriptソースでは、MoveCheckという名称の関数を作っています。
この関数では、確認ダイアログの返値を受け取って、trueだったらページ移動、falseだったらアラートボックスを表示させています。

この関数を呼び出すHTMLは以下のように記述します。

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

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

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど