htmlの入力フォームで入力された値をjsでページを遷移させるときに一緒に渡したい

html
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7<meta charset="UTF-8">
8<title>住所削除ページ</title>
9</head>
10<body>
11<!--<form action="/webkensyu/Addr_delete">-->
12<p><label>削除する郵便番号を入力してください:<input type="text" name="text1"></label></p>
13<button type="submit" name="button" onClick="kakunin()">削除</button>
14<!-- </form> -->
15
16
17 <script>
18   function kakunin(){
19	   
20	  
21	   var result = window.confirm('本当に削除しますか');
22	   
23	   if(result){
24		   location.href = "/webkensyu/Addr_delete";
25		   
26	   }else{
27		   
28		   location.href ="addr_delete.jsp";
29	   }
30   }
31  </script>
32</body>
33</html>

<p><label>削除する郵便番号を入力してください:<input type="text" name="text1"></label></p>

の値を

var result = window.confirm('本当に削除しますか');

   if(result){
	   location.href = "/webkensyu/Addr_delete";   
   }

ここでサーブレットに　入力された値を渡したいです。

今のままだと値が渡せれていないので、アドバイス頂けると幸いです。

m.ts10806

2019/09/09 02:21

>onClick="kakunin()" kakunin()の中にあるこの謎の１行は何でしょう。

m.ts10806

2019/09/09 02:22

formにしない理由は何でしょう。 confirm出してもformは使えますよ

kokok

2019/09/09 02:33

onClick="kakunin()" 余計な文でした。現在のコードだと　<form action="/webkensyu/Addr_delete">　ここのコードをいれてしまうと confirmでキャンセルを選択しても　　"/webkensyu/Addr_delete"　ここへ遷移してしまいます。

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

回答2件

ベストアンサー

現在のコードだと　<form action="/webkensyu/Addr_delete">　ここのコードをいれてしまうと

confirmでキャンセルを選択しても　　"/webkensyu/Addr_delete"　ここへ遷移してしまいます。

submitボタンのイベントを止める必要があります。
return falseか、preventDefault()か。

ボタンをclickにしてform.submit()でいい気がします。

jsp
1<form action="<%=request.getContextPath()%>/Addr_delete" id="delete">
2<p><label>削除する郵便番号を入力してください:<input type="text" name="text1"></label></p>
3<button type="button" name="button" id="button">削除</button>
4</form>
5	  
6<script>
7let button = document.getElementById('button');
8button.addEventListener('click', function() { 
9	if(window.confirm('本当に削除しますか')){
10		document.getElementById('delete').submit();
11		return;
12	}
13}); 
14</script>

ちなみにlocation.hrefだとdoGet()のほうに行きます。
formすら書きたくないならlocation.href のURLの後ろに?text1=でクエリストリングつければ良いです。

現在でもformにmethod指定されてないのでGETでいいんだなと思ってそのままにしてますが、
それは「どのように値を受け取りたいか」で決めたほうが良いです。

このままですと悪意あるユーザーからURL/webkensyu/Addr_delete?text1=hogehogeなど直接アクセスを許してしまうことになり、意図しない情報を削除されることにもなります。
DBへの変更が絡む処理なのであればPOSTのほうが良いでしょう。

投稿2019/09/09 02:38

m.ts10806

総合スコア80850

kokok

2019/09/09 04:40

回答ありがとうございます。回答頂いたコード調べながら書き、理解できました。データを送るような場合はpostにするようにします。ありがとうございます。

m.ts10806

2019/09/09 04:42

「submit confirm」とかで調べれば「送信前に確認メッセージを出す」紹介記事はたくさんありますし古くからおこなわれている、ほぼほぼ確立した手法ですよ。

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

普通にformで飛ばしてください
（キャンセルで飛ぶのはどうかと思いますが・・・）

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('form').addEventListener('submit',e=>{
4    var f=e.target;
5    if(f.elements["text1"].value==""){
6      alert('入力して!');
7      e.preventDefault();
8    }else{
9      var result = confirm('本当に削除しますか');
10      f.action =result? "/webkensyu/Addr_delete":"addr_delete.jsp";
11    }
12  });
13});
14</script>
15<form action="/webkensyu/Addr_delete">
16<p><label>削除する郵便番号を入力してください:<input type="text" name="text1"></label></p>
17<button type="submit" name="button">削除</button>
18</form>