jQueryでalert()を使ういろいろな方法

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

alert()はダイアログを表示させるjavascriptのメソッドです。

jQueryでalert()を表示させる基本的な方法から、confirm()で「OK」「キャンセル」のダイアログを表示させたり、入力ダイアログを表示させる方法などをご紹介します。

 

alert()の使い方

alert()を表示させる

まずはalert()を表示させてみましょう。

jQuery

結果(動作サンプル)

以下のボタンをクリックするとalert()が表示されるかと思います。



参考:jQueryのclick()で処理を実行&無効にする方法

構文

alert()は以下のような構文になります。

alert( テキスト )

引数には文字列や数字等以外に、変数も設定できます。

alert内で改行させる

alert()ダイアログ内でテキストを改行させます。

改行コードである\nを追加するとその箇所で改行されます。

jQuery

結果(動作サンプル)

以下のボタンをクリックすると、改行されたテキストを含むalert()が表示されるかと思います。



変数をalertに表示させる

alert()は変数も表示させることができます。

jQuery

結果(動作サンプル)

以下のボタンをクリックすると、変数に格納されたテキストを含むalert()が表示されるかと思います。


トーマス


ログインユーザー名を取得して表示させたりいろいろな使い方ができるかと思います。

confirmで確認ダイアログを出す

confirmの使い方

alert()はテキストとokボタンのみですが、「OK」「キャンセル」といった選択肢を持たせることができるのがconfirm()です。

以下のサンプルでは、if文を使ってダイアログの押したボタンによって条件分岐させています。

HTML

jQuery

結果(動作サンプル)

以下のボタンをクリックすると、確認ダイアログが表示されますので、「OK」か「キャンセル」をクリックしてみてください。

(サンプルですので押してもテキストが表示されるだけですよ。)



構文

confirm()は以下のような構文になります。

confirm( テキスト )

引数には文字列や数字等以外に、変数も設定できます。

解説

上記サンプルは以下のように動作しています。

①ボタンをクリックすると発動する

jQueryのclick()でボタンをクリックしたら処理が開始します。

click()の詳細は以下で解説しています。

参考:jQueryのclick()で処理を実行&無効にする方法

②if文でキャンセルをクリックしたら際の処理を記述

confirmは「OK」「キャンセル」のダイアログを出すメソッドですが、先頭に!(エクスクラメーションマーク)を入れると否定の意味となります。

つまり、条件分岐のif文と併用することで、ダイアログのキャンセルをクリックした場合の処理を記述しています。

もしここで!(エクスクラメーションマーク)を付けなかった場合、「OK」をクリックした処理になります。

if文の詳細は以下で解説しています。

参考:jQueryでのif文の書き方

③submitボタンの効果をキャンセルする

「キャンセル」をクリックした場合の処理を記述しています。return falseは処理を中断するための記述になります。

もしreturn falseをしなかった場合、キャンセルボタンをクリックしても処理がそのまま走ってしまうので注意しましょう。

④elseで「OK」ボタンをクリックした際の処理を記述

「OK」をクリックした場合の処理を記述しています。今回はとりあえずtext()でHTMLに完了メッセージを表示させました。

本番では、送信処理やページ遷移等に使えるかと思います。

text()の詳細は以下で解説しています。

参考:text() でHTML要素にテキストを追加

promptで入力ダイアログを出す

入力ダイアログを出す

prompt()はダイアログに任意のテキストを入力できます。

以下のサンプルでは、入力したテキストをHTMLに表示させています。

HTML

jQuery

結果(動作サンプル)

以下のボタンをクリックすると、入力ダイアログが表示されますので、テキストを入力してクリックしてみてください。

(サンプルですので、入力してもあなたの年齢はこちらには知らされませんのでご安心くださいね。)



構文

prompt()は以下のような構文になります。

prompt( テキスト, (初期値) )

引数には文字列や数字等以外に、変数も設定できます。

第二引数を入れると、あらかじめダイアログに初期値を設定できます。

初期値が入力済みの入力ダイアログを出す

prompt()は入力欄にあらかじめテキストを入力した状態で、表示させることもできます。

HTML

jQuery

結果(動作サンプル)

以下のボタンをクリックすると、入力ダイアログが表示されますので、テキストを入力してクリックしてみてください。



スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. カツくん より:

    こんにちは。
    一時停止メッセージとして、sweetAlert2 というデザイン性のあるアドインを利用してみました(promiseも使用)。
     しかし、最後から3行目の }) で;(セミコロン)を付けようとするとエラーとなります。何故付けてはいけないのかーがよくわかりません。
    (※ swal.fire については、あらかじめ下記を読み込んでおかないとエラーとなります)

    // 消去 確認ダイアログを表示し、OKが押されたら消去する
    $('#DltDt').on("click", function () {

    const promise = new Promise((resolve, reject) => {
    // 消去 確認
    swal.fire({
    title: '= 確認 =',
    text: '既存の全データを「消去」しますか?',
    //icon: "warning",
    showCancelButton: true,
    confirmButtonColor: "#9cbb1c",
    confirmButtonText: "O K",
    cancelButtonText: "キャンセル",
    //closeOnConfirm: false,
    position: "center-left",
    }).then((result) => {
    if (!result.value) { return false; }
    resolve();
    });
    });
    //if (!confirm("既存の全データを\n消去しますか?")) { return false; }

    promise.then(() =>

    $('input[type="text"]').each(function () {
    // 内容を空にする
    $(this).val("");
    })
    );
    });

  2. カツくん より:

    ~下記を読み込んでおかないとエラーとなります)
    の下に1行scriptがあったのですが、送信されなかったみたいですね。(+o+)
    お手数ですが、下記を参照してみてください。
    https://lmn-blog.com/sweet_alert2/

カツくん へ返信する コメントをキャンセル

*