複数のボタンがあり、ボタンを押すとメッセージを出力させたい

前提・実現したいこと

データを複数出力し、それぞれに修正、削除ボタンを押した時に、submitされる前にメッセージを出すように
しようとしています。

ボタンをクリックして処理する前にメッセージを出したいと思います。
可能であれば各フォームボタンに番号を割り振って、それを元にメッセージを出す処理を盛り込みたいです。
今は上から順番に番号が割り振られていると仮定しメッセージを出しています。
実際にはそれぞれ番号を割り振りながらですので、飛び飛びの番号です。

いい方法があればご教授願えないでしょうか。
よろしくお願いします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6</head>
7<body>
8  <form action="" id="form1" data-id="1">
9    費用:<input type="text" name="sisetu">
10    金額<input type="text" name="biko">
11    <input type="submit" name="submit1" id="submit1" value="削除">
12  </form>
13
14 <form action="" id="form2" data-id="2">
15    費用:<input type="text" name="sisetu">
16    金額<input type="text" name="biko">
17    <input type="submit" name="submit2" id="submit2" value="削除">
18  </form>
19
20 <form action="" id="form3" data-id="3">
21    費用:<input type="text" name="sisetu">
22    金額<input type="text" name="biko">
23    <input type="submit" name="submit3" id="submit3" value="削除">
24  </form>
25<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
26
27 <script>
28  $(function(){
29
30    for(var i=1; i <= 3;i++){
31      $('#submit'+i).on('click',function(){
32        alert('削除しますか');
33      });
34    }
35
36
37  });
38</script>
39  
40
41
42</body>
43</html>

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

回答1件

ベストアンサー

こんな感じかなかな？

HTML
1<body>
2    <form action="" id="form1" data-id="1">
3        費用:<input type="text" name="sisetu">
4        金額<input type="text" name="biko">
5        <input class="submit-button" type="submit" name="submit1" id="submit1" value="削除">
6    </form>
7
8    <form action="" id="form2" data-id="5">
9        費用:<input type="text" name="sisetu">
10        金額<input type="text" name="biko">
11        <input class="submit-button" type="submit" name="submit2" id="submit2" value="削除">
12    </form>
13
14    <form action="" id="form3" data-id="7">
15        費用:<input type="text" name="sisetu">
16        金額<input type="text" name="biko">
17        <input class="submit-button" type="submit" name="submit3" id="submit3" value="削除">
18    </form>
19
20<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
21
22<script>
23$(function()
24{
25    $(".submit-button").on('click', function()
26    {
27        var id = $(this).parent().data("id");
28
29        alert(id + ' を、削除しますか');
30    });
31});
32</script>
33
34</body>