alert()はダイアログを表示させるjavascriptのメソッドです。
jQueryでalert()を表示させる基本的な方法から、confirm()で「OK」「キャンセル」のダイアログを表示させたり、入力ダイアログを表示させる方法などをご紹介します。
目次
alert()の使い方
alert()を表示させる
まずはalert()を表示させてみましょう。
jQuery
|
1 2 |
// alertを出す alert('アラーートだよ'); |
結果（動作サンプル）
以下のボタンをクリックするとalert()が表示されるかと思います。
参考：jQueryのclick()で処理を実行&無効にする方法
構文
alert()は以下のような構文になります。
alert( テキスト )
引数には文字列や数字等以外に、変数も設定できます。
alert内で改行させる
alert()ダイアログ内でテキストを改行させます。
改行コードである\nを追加するとその箇所で改行されます。
jQuery
|
1 2 |
// alert内で改行 alert('アラートだよ\n誰がなんと言おうと\n改行されたアラートだよ'); |
結果（動作サンプル）
以下のボタンをクリックすると、改行されたテキストを含むalert()が表示されるかと思います。
変数をalertに表示させる
alert()は変数も表示させることができます。
jQuery
|
1 2 3 4 5 |
// alertで表示させたい文字列を変数に格納 var name = 'トーマス'; // 変数をalertに表示 alert('こんにちは' + name + 'さん'); |
結果（動作サンプル）
以下のボタンをクリックすると、変数に格納されたテキストを含むalert()が表示されるかと思います。
トーマス
ログインユーザー名を取得して表示させたりいろいろな使い方ができるかと思います。
confirmで確認ダイアログを出す
confirmの使い方
alert()はテキストとokボタンのみですが、「OK」「キャンセル」といった選択肢を持たせることができるのがconfirm()です。
以下のサンプルでは、if文を使ってダイアログの押したボタンによって条件分岐させています。
HTML
|
1 |
<input type="submit" name="send" id="send" value="確認"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 確認ボタンをクリックするとイベント発動 $('#send').click(function() { // もしキャンセルをクリックしたら if (!confirm('テスト送信してもよろしいですか？')) { // submitボタンの効果をキャンセルし、クリックしても何も起きない return false; // 「OK」をクリックした際の処理を記述 } else { // HTMLに完了メッセージを表示 $('p').text('テスト送信完了！'); } }); |
結果（動作サンプル）
以下のボタンをクリックすると、確認ダイアログが表示されますので、「OK」か「キャンセル」をクリックしてみてください。
（サンプルですので押してもテキストが表示されるだけですよ。）
構文
confirm()は以下のような構文になります。
confirm( テキスト )
引数には文字列や数字等以外に、変数も設定できます。
解説
上記サンプルは以下のように動作しています。
①ボタンをクリックすると発動する
|
1 2 |
// 確認ボタンをクリックするとイベント発動 $('#send').click(function() { |
jQueryのclick()でボタンをクリックしたら処理が開始します。
click()の詳細は以下で解説しています。
参考：jQueryのclick()で処理を実行&無効にする方法
②if文でキャンセルをクリックしたら際の処理を記述
|
1 2 |
// もしキャンセルをクリックしたら if (!confirm('テスト送信してもよろしいですか？')) { |
confirmは「OK」「キャンセル」のダイアログを出すメソッドですが、先頭に!（エクスクラメーションマーク）を入れると否定の意味となります。
つまり、条件分岐のif文と併用することで、ダイアログのキャンセルをクリックした場合の処理を記述しています。
もしここで!（エクスクラメーションマーク）を付けなかった場合、「OK」をクリックした処理になります。
if文の詳細は以下で解説しています。
③submitボタンの効果をキャンセルする
|
1 2 |
// submitボタンの効果をキャンセルし、クリックしても何も起きない return false; |
「キャンセル」をクリックした場合の処理を記述しています。return falseは処理を中断するための記述になります。
もしreturn falseをしなかった場合、キャンセルボタンをクリックしても処理がそのまま走ってしまうので注意しましょう。
④elseで「OK」ボタンをクリックした際の処理を記述
|
1 2 3 |
} else { // HTMLに完了メッセージを表示 $('p').text('テスト送信完了！'); } |
「OK」をクリックした場合の処理を記述しています。今回はとりあえずtext()でHTMLに完了メッセージを表示させました。
本番では、送信処理やページ遷移等に使えるかと思います。
text()の詳細は以下で解説しています。
promptで入力ダイアログを出す
入力ダイアログを出す
prompt()はダイアログに任意のテキストを入力できます。
以下のサンプルでは、入力したテキストをHTMLに表示させています。
HTML
|
1 |
<p></p> |
jQuery
|
1 2 3 4 5 |
// promptに確認メッセージ入力し変数に格納 var age = prompt('年齢はおいくつですか？'); // 入力したテキストをHTMLに表示 $('p').text(age + '歳'); |
結果（動作サンプル）
以下のボタンをクリックすると、入力ダイアログが表示されますので、テキストを入力してクリックしてみてください。
（サンプルですので、入力してもあなたの年齢はこちらには知らされませんのでご安心くださいね。）
構文
prompt()は以下のような構文になります。
prompt( テキスト, (初期値) )
引数には文字列や数字等以外に、変数も設定できます。
第二引数を入れると、あらかじめダイアログに初期値を設定できます。
初期値が入力済みの入力ダイアログを出す
prompt()は入力欄にあらかじめテキストを入力した状態で、表示させることもできます。
HTML
|
1 |
<p></p> |
jQuery
|
1 2 3 4 5 |
// promptに確認メッセージと初期値を入力し変数に格納 var str = prompt('この内容で送信しますか？', '玉ねぎスープ'); // 入力したテキストをHTMLに表示 $('p').text(str); |
結果（動作サンプル）
以下のボタンをクリックすると、入力ダイアログが表示されますので、テキストを入力してクリックしてみてください。
こんにちは。
一時停止メッセージとして、sweetAlert2 というデザイン性のあるアドインを利用してみました(promiseも使用）。
しかし、最後から３行目の }) で；（セミコロン）を付けようとするとエラーとなります。何故付けてはいけないのかーがよくわかりません。
（※ swal.fire については、あらかじめ下記を読み込んでおかないとエラーとなります）
// 消去 確認ダイアログを表示し、ＯＫが押されたら消去する
$(‘#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(“”);
})
);
});
～下記を読み込んでおかないとエラーとなります）
の下に１行scriptがあったのですが、送信されなかったみたいですね。(+o+)
お手数ですが、下記を参照してみてください。
https://lmn-blog.com/sweet_alert2/