●やりたいこと
<input type="hidden" name="u_telno[n]">
に、/myproject/ajax/get-nameで取得した値data.u_telnoをセットし、フォームでpostできるようにする.
HTMLを修正すべきでしょうか?
必ず、入力したu_idの行のhidden要素にだけ、値をセットしたいです。
●現状
data.u_name
data.u_telno
が/myproject/ajax/get-nameの戻り値である
●試してみたこと1(コードに追記)
$(.u_telno).val(data.u_telno);
→ submitしてみると、hiddenの値は設定されていない
●試してみたこと2
hidden要素でid指定する
$('#u_telno').val(data.u_telno);
→ この場合、以下の例だと同じidを複数書けませんので、動作しません(ただし id=u_telnoが一つの場合は期待どおりの結果になる)
<html> <head> <title></title> <script src="./jquery-3.3.1.min.js"></script> <script> $("body").ready(function() { $(".u_id").on("change", function(e) { var u_id = $(this).val().trim(); var elem = $(this).parent().parent(); elem.find(".u_name").text("searching..."); $.ajax( { url: '/myproject/ajax/get-name', method: 'POST', data: { u_id: u_id }, dataType: 'json', success: function(data) { elem.find(".u_name").text(data.u_name); $(.u_telno).val(data.u_telno); }, error: function() { elem.find(".u_name").text(""); alert('氏名の取得でエラー'); } }); }); }); </script> </head> <body> <form method="post" action="mypage"> <input type="submit" value="Submit"> <table> <tr> <th>ユーザID<th> <th>ユーザ名</th> </tr> <tr id="hoge1"> <td><input type="text" name="u_id[1]" id="u_id[1]" class="u_id" value=""></td> <td> <p id="u_name[1]" class="u_name"></p> <input type="hidden" name="u_telno[1]" class="u_telno[1]"> </td> </tr> <tr id="hoge2"> <td><input type="text" name="u_id[2]" id="u_id[2]" class="u_id" value=""></td> <td> <p id="u_name[2]" class="u_name"></p> <input type="hidden" name="u_telno[2]" class="u_telno[2]"> </td> </tr> <tr id="hoge3"> <td><input type="text" name="u_id[3]" id="u_id[3]" class="u_id" value=""></td> <td> <p id="u_name[3]" class="u_name"></p> <input type="hidden" name="u_telno[3]" class="u_telno[3]"> </td> </tr> </table> </form> </body> </html>
回答1件
あなたの回答
tips
プレビュー