超簡単にモーダルを作成したいときに、JavaScriptのalertメソッドやconfirmメソッドが利用できます。今回はその利用方法についての記述です。

alert

alertとは警告を意味する単語ですね。

ですので、このメソッドを利用することにより、利用するユーザに警告を伝える事ができます。

例えば、ユーザが誤った入力をしてしまった時、このメソッドにより違うよ！という注意喚起ができます。

誕生日を入力するフォームがあったとして、現在より未来の日付けを入力するのは変ですよね？そんな時は

alert('今年は2018年だよ。未来から来たのかな？');

alertによる注意喚起

こうやってユーザに注意喚起を促せば、
あ、そうだった！ってなりますよね。(笑)

しかし、alertには欠点があってユーザからYes・Noか確認を取る事はできないんです。

欠点というか、確認をとる役割では無いだけなんですが、

本当に未来から来た人が未来の誕生日をフォームに入れてるかも知れませんよね？

これで良いのか？という確認を行いたい場合はconfirm(確認する)メソッドが利用できます。

confirm

confirmは確認するという意味です。

メソッド名は役割をよく表しています。

confirm('未来の日付けを入力しているけど、いいの？');

confirmによる確認

これでOKを押せばYes、キャンセルを押せばNoというユーザからの確認が取れますね。

しかし、プログラム上でその条件分岐を取るにはどうすれば良いのでしょうか？

var future = confirm('未来の日付けを入力しているけど、いいの？');

if(future){
　　　　　console.log('未来からなんだね。');
}
else{
　　　　　console.log('あ、間違いなんだね。');
}

confirmメソッドの返り値がYes・Noのフラグになる訳です。

Yesの場合は、戻り値がtrue
Noの場合は、戻り値がfalse

これで簡単に、以降の処理を条件分岐させる事ができますね。

httpリクエストをキャンセルする方法

お問い合わせフォームでは、フォームの情報を送信しますが、送信情報に誤りが無いか確認したいとします。

お問い合わせ内容の確認

この時、OKの場合はお問い合わせ内容に問題が無かったとしてフォームが送信されます。

しかし、不備があった場合(キャンセルが押された場合)送信されては困ります。

しかし、キャンセルを押してもお問い合わせは送信されてしまいます。

キャンセルを押した場合は、フォームを送信しないという条件を作成する必要があります。

var noProblem = confirm('件名： 〇〇○の使い方について\nメールアドレス：hoge@email.com\nお問い合わせ内容：○○○が分からないんですがどうしたらいいですか？\nこちらでお間違いありませんか？');

if(noProblem != true){
     return false;
}

noProblem != falseの場合、

つまり

noProblem == falseの場合、

つまり

キャンセルを押された場合にreturn false;を行います。

return false;により、以降の処理へ進まなくなり、httpリクエストは送信されません。