jspでsubmitボタンを押した後に、背景色を変えたい

java
1 <td>
2 <input type="submit"value="OK" onClick="return confirm('これで大丈夫ですか')">
3</td>

jspで、「OK」ボタンを押すと、「これで大丈夫ですか」という確認アラートが表示されるという処理をかきました。これに加えて、「OK」ボタンを押した後、jspページの背景の色が変わるようにしたいのですが、どのようにかいたら良いか分からないので教えてほしいです。宜しくお願いします。

退会済みユーザー

2018/06/20 07:30

この質問でタグがJavaというのは不適切です。JavaScript に変更してください。もしかして JavaScript = jsp だと思ってます？

m.ts10806

2018/06/20 07:49

JavaとJavaScriptの「別物感」を印象づけるフレーズ集 https://qiita.com/suin/items/1e4791ac4fca4885eb73

m.ts10806

2018/06/20 07:50

ちなみに、submitボタンだと送信してしまうので、送信せずに何かしら処理をしたい場合、event.preventDefault()などで止める必要があるのは認識済みでしょうか。

行動規範の内容に同意します

回答2件

JavaScriptの関数を作ってそれをOKボタンで呼び出すようにしたほうがよいですね。
こんな感じ。

html
1<html><head><title>テスト</title>
2<script language="javascript" type="text/javascript">
3  //OKボタンを押したときに呼び出される関数
4  function OnButtonClick() {
5	if ( confirm('これで大丈夫ですか') ) {
6        //↓↓背景を変える処理↓↓
7		document.getElementById('test').style.backgroundColor = "#FFFFAA";
8		form.submit();
9	}
10  }
11</script>
12</head><body id="test">
13
14<h2>テスト</h2>
15<form action="" method="POST">
16<input type="button"value="OK" onClick="OnButtonClick();">
17</form>
18</body></html>
19

投稿2018/06/20 08:17

編集2018/06/20 09:23

tsunex

総合スコア206

m.ts10806

2018/06/20 08:32

submit()してしまってはせっかく変えた背景意味ないのでは・・・。

m.ts10806

2018/06/20 08:35

というのは元々の要件がおかしかったせいですよね。失礼しました。

tsunex

2018/06/20 08:55

情報整備その他を考えるといろいろと難しいところがありますよね... 自分はまず質問者が問題を解決出来るヒントを提供できれば良いと考えています。

m.ts10806

2018/06/20 08:56

そうですね。たまに実現したいことと文章が合ってないこともあるので、ちょっと慎重になってしまいます。

prog1717nm

2018/06/20 09:02

お二方、回答ありがとうございます。 tsunexさん、JavaScriptのプログラムありがとうございます。早速実行してみたのですが、OKボタンを押した後すぐに、背景の色を変えるにはどうしたらよいでしょうか？確認アラートのOKボタンを押す前に、背景の色を変えたいのですが...。

m.ts10806

2018/06/20 09:08

ついでなので突っ込んでしまいますが、要件と質問でタイミングが矛盾しています。・OKボタンを＊押した後＊すぐに、背景の色を変えるにはどうしたらよいでしょうか？・確認アラートのOKボタンを＊押す前＊に、背景の色を変えたい整理した上で質問本文に反映していただけますか？

tsunex

2018/06/20 09:26

prog1717nmさん回答にコメントを入れました。背景の色を変える処理の１行を確認アラートのOKボタンを表示する前の箇所に移動すればよいと思います。質問はmts10806さんがおっしゃるとおり反映したほうが良いかもですね。

行動規範の内容に同意します

ベストアンサー

サンプル

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title></title>
6		<style type="text/css">
7			table {
8				table-layout: auto;
9				border-collapse: collapse;
10			}
11			th, td {
12				border: 1px solid #CCC;
13			}
14			tr.active {
15				background-color: #CCF;
16			}
17			tr.deleted {
18				background-color: #FCC;
19			}
20		</style>
21    </head>
22    <body>
23		<div>
24			<form action="">
25
26				<table id="table-list">
27					<thead>
28						<tr>
29							<th>head</th>
30							<th>head</th>
31						</tr>
32					</thead>
33					<tbody>
34						<tr>
35							<td>1</td>
36							<td>
37								<input class="delBtn" type="button" value="削除" />
38							</td>
39						</tr>
40						<tr>
41							<td>2</td>
42							<td>
43								<input class="delBtn" type="button" value="削除" />
44							</td>
45						</tr>
46						<tr>
47							<td>3</td>
48							<td>
49								<input class="delBtn" type="button" value="削除" />
50							</td>
51						</tr>
52						<tr>
53							<td>4</td>
54							<td>
55								<input class="delBtn" type="button" value="削除" />
56							</td>
57						</tr>
58					</tbody>
59				</table>
60
61			</form>
62		</div>
63		<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
64		<script type="text/javascript">
65			$(".delBtn").on('click', function () {
66				var tr = $(this).parents('tr');
67				tr.addClass("active");
68				if (confirm("よろしいですか？")) {
69					tr.addClass('deleted');
70					tr.removeClass('active');
71				} else {
72					tr.removeClass('active');
73				}
74			});
75		</script>
76    </body>
77</html>
78