Form内要素の配列のイベントの取得をするにはどうしたらいいか？

●やりたいこと
以下HTMLのユーザIDを入力したら隣のセルにユーザ名を表示させたい。
なお、ユーザ名は、DBから取得する。
●疑問点（３つあります）
1)どのユーザIDのinputで入力があったか？をどうやって判定するのか？
2)指定したユーザIDの取得をどうやって行うのか？
3)氏名のセットをするにはHTML側の修正が必要かと思いますがどうすればよいでしょうか？配列の場合にはどのように氏名セット先を変更すればよいのでしょうか？

HTML
1<table>
2<tr>
3  <th>ユーザID<th>
4  <th>ユーザ名</th>
5</tr>
6<tr>
7  <td><input type="text" name="u_id[1]" id="u_id[1]" value="1001"></td>
8  <td><p id="u_name[1]"></p></td>
9</tr>
10<tr>
11  <td><input type="text" name="u_id[2]" id="u_id[2]"value="1002"></td>
12  <td><p id="u_name[2]"></p></td>
13</tr>
14<tr>
15  <td><input type="text" name="u_id[3]" id="u_id[3]"value="1003"></td>
16  <td><p id="u_name[3]"></p></td>
17</tr>
18</table>

ajax
1$( function(){
2
3  $.ajax({
4    url: '/myproject/ajax/get-name',
5    method: 'POST',
6    data: { user_id: },
7    dataType: 'json',
8    success: function(data){
9        // 指定したinputの隣のセルに取得した氏名をセットするのは？
10    },
11    error: function(){
12        alert('氏名の取得でエラー');
13    }
14    });
15});

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

回答1件

ベストアンサー

HTML
1<html>
2<head>
3<title>hoge</title>
4
5<script src="./jquery-3.3.1.min.js"></script>
6<script>
7
8$("body").ready(function()
9{
10	$(".u_id").on("change", function(e)
11	{
12		console.log("changed.");
13
14		var u_id = $(this).val().trim();
15
16		console.log(u_id);
17
18		var elem = $(this).parent().parent();
19
20		console.log(elem.attr("id"));
21
22		elem.find(".u_name").text("searching...");
23
24		$.ajax(
25		{
26			url: '/myproject/ajax/get-name',
27			method: 'POST',
28			data: { user_id: u_id },
29			dataType: 'json',
30			success: function(data)
31			{
32				// 指定したinputの隣のセルに取得した氏名をセットするのは？
33				
34
35				// 例）取得したjsonのu_nameとして名前が参照できる場合
36				elem.find(".u_name").text(data.u_name);
37
38			},
39			error: function()
40			{
41				elem.find(".u_name").text("");
42
43				alert('氏名の取得でエラー');
44			}
45		});
46	});
47});
48
49</script>
50
51</head>
52<body>
53	<table>
54		<tr>
55			  <th>ユーザID<th>
56			  <th>ユーザ名</th>
57		</tr>
58		<tr id="hoge1">
59			  <td><input type="text" name="u_id[1]" id="u_id[1]" class="u_id" value=""></td>
60			  <td><p id="u_name[1]" class="u_name"></p></td>
61		</tr>
62		<tr id="hoge2">
63			  <td><input type="text" name="u_id[2]" id="u_id[2]" class="u_id" value=""></td>
64			  <td><p id="u_name[2]" class="u_name"></p></td>
65		</tr>
66		<tr id="hoge3">
67			  <td><input type="text" name="u_id[3]" id="u_id[3]" class="u_id" value=""></td>
68			  <td><p id="u_name[3]" class="u_name"></p></td>
69		</tr>
70	</table>
71</body>
72</html>