JavaScriptでalert(アラート)を表示する

2020年4月29日2021年1月24日

タイトルの通り、ボタンを押したらアラートを出させてユーザーに確認をしてもらいます。

前回の続き、から追記していく感じでコードを書いていきます。

前回、を見てない方はこちらから
https://kazunaka.com/java-jsp-selectbox/

図の流れは①〜③の感じです。

①送信したい人物の選択。

②確認アラートの表示

③OKなら「送信しました」の表示

③キャンセルなら「キャンセルしました」の表示

ボタンの追加（前回の続き）

<body>の中に書いてください。

<div>
 <input type="button" onclick='sendMail();' value="送信" />
</div>

これでボタンが追加できました。

イベントの追加（前回の続き）

「送信」ボタンを押したらイベントが発生するように設定します。

function sendMail() {
　var value = document.getElementById("selectUser").value;
　var res = confirm(value + "にメールを送信しますか？");
　if(res == true) {
　　//OKなら承認申請を出す
　　alert(value + "にメールを送信しました");
　} else {
　　//キャンセル
　　alert("キャンセルしました");
　}
}

ボタンのonclick=’sendMail();’とfunction sendMail() {}が紐づいていてイベントが発生します。

alertを覚えるだけでもハッタリになります。
初心者には上級者っぽく見せれますのでぜひ参考にしてみてください。

全体コード

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Map<String, String> map = new HashMap<>();
	map.put("おれ", "おれのメールアドレス");
	map.put("同僚", "同僚のメールアドレス");
	map.put("上司", "上司のメールアドレス");
	map.put("後輩", "後輩のメールアドレス");
	map.put("先輩", "先輩のメールアドレス");
	map.put("松本", "松本のメールアドレス");
	map.put("代表取締役", "代表取締役のメールアドレス");
%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
		<script type="text/javascript">
			function setMail() {
				var value = document.getElementById("selectUser").value;
				var getMail = document.getElementById("getMail");
				var text = value;
				getMail.value = text;
			}
			
			function sendMail() {
				var value = document.getElementById("selectUser").value;
				var res = confirm(value + "にメールを送信しますか？");
				if(res == true) {
					//OKなら承認申請を出す
					alert(value + "にメールを送信しました");
				} else {
					//キャンセル
					alert("キャンセルしました");
				}
			}
			
		</script>
	</head>
	<body>
		<select id="selectUser" onchange="setMail()">
		<option value=""></option>
		<%for(Map.Entry<String, String> entry : map.entrySet()) { %>
			<option value="<%=entry.getValue() %>" ><%=entry.getKey() %></option>
		<%} %>
	</select>
	<input type="text" id="getMail">
	<div>
		<input type="button" onclick='sendMail();' value="送信" />
	</div>
	
	</body>
</html>

参考になったら嬉しいです。

ではまた。