ユーザID	\r\n	ユーザ名
	\r\n \r\n \r\n
	\r\n \r\n \r\n
	\r\n \r\n \r\n

ユーザID	\r\n	ユーザ名
	\r\n \r\n\r\n
	\r\n \r\n\r\n
	\r\n \r\n\r\n

●やりたいこと
<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>

yambejp

2018/03/27 14:32

$(.u_telno).val(data.u_telno);は明らかに記載ミス

sakura-shi

2018/03/27 14:58 編集

$(”.u_telno”).val(data.u_telno);　　が正しいですね。が、入力したu_idに合致したhiddenには値はセットされません。どのように記述したらいいでしょうか？

sakura-shi

2018/03/27 23:00

そもそもできないことなのでしょうか？それともHTMLを修正するんなりすればできることなのでしょうか？？？

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

回答1件

ベストアンサー

ちょっと考え方がおかしい気がします
[]をつけて値を渡す処理はサーバー側の言語によっては配列のように
挙動するだけで単に文字列でパラメータを渡していることに変わりありませんね

それと

HTML
1<input type="hidden" name="u_telno[1]" class="u_telno[1]">
2↓↓↓
3<input type="hidden" name="u_telno[1]" class="u_telno">
4

としないとクラスで拾えなくないですか？

sample

ざっくりとサンプルを付けておきます。
hiddenだと確認しづらいのでとりあえずtextにしてあります
都合上ajaxの送り先はphpファイルを指定してあります
ご自身の環境に併せてサーバーサイドの処理は調整下さい

送り元

javacript
1$(function(){
2  $(".u_id").on("change", function(e){
3    var u_id = $(this).val().trim();
4    var idx = $(".u_id").index(this);
5    $(".u_name").eq(idx).text("searching...");
6    $.ajax({
7    url: 'getajax.php',
8    method: 'POST',
9    data: { u_id: u_id },
10    dataType: 'json',
11    }).done(function(data){
12      $(".u_name").eq(idx).text(data["u_name"]);
13      $(".u_telno").eq(idx).val(data["u_telno"]);
14    }).fail(function(xhr,err){
15      $(".u_name").eq(idx).text('氏名の取得でエラー');
16    });
17  });
18});

HTML
1<form method="post">
2<input type="submit" value="Submit">
3<table>
4<tr>
5<th>ユーザID<th>
6<th>ユーザ名</th>
7</tr>
8<tr id="hoge1">
9<td><input type="text" name="u_id[1]" id="u_id[1]" class="u_id" value=""></td>
10<td>
11<p id="u_name[1]" class="u_name"></p>
12<input type="text" name="u_telno[1]" class="u_telno">
13</td>
14</tr>
15<tr id="hoge2">
16<td><input type="text" name="u_id[2]" id="u_id[2]" class="u_id" value=""></td>
17<td>
18<p id="u_name[2]" class="u_name"></p>
19<input type="text" name="u_telno[2]" class="u_telno">
20</td>
21</tr>
22<tr id="hoge3">
23<td><input type="text" name="u_id[3]" id="u_id[3]" class="u_id" value=""></td>
24<td>
25<p id="u_name[3]" class="u_name"></p>
26<input type="text" name="u_telno[3]" class="u_telno">
27</td>
28</tr>
29</table>
30</form>

ajax先:getajax.php

PHP
1<?PHP
2$u_id=filter_input(INPUT_POST,"u_id");
3$data=[
4  1=>["u_name"=>"aaa","u_telno"=>"090-1111"],
5  2=>["u_name"=>"bbb","u_telno"=>"090-2222"],
6  3=>["u_name"=>"ccc","u_telno"=>"090-3334"],
7];
8if(isset($data[$u_id])){
9  print json_encode($data[$u_id]);
10}else{
11  print "nodata";
12}
13?>

投稿2018/03/27 14:04

編集2018/03/28 03:51

yambejp

総合スコア118164

sakura-shi

2018/03/27 14:25 編集

ありがとうございます。同じクラスを以下のように複数記述して試してみました <input type="hidden" name="u_telno[1]" class="u_telno"> このクラスを複数記述すると、すべてのhidden要素に同じ値がセットされてしまいます。必ず、入力したu_idの行のhidden要素にだけ値をセットしたいです

yambejp

2018/03/28 00:40

.u_idと.u_telnoが常に１対1で存在するなら.u_idの要素を変更した際におなじindexの.u_telnoを変更すればいいので「すべてのhidden要素に同じ値がセット」されることはありませんもしくは自分自信のnameである「name="u_id[x]"」からxを取り出してそれに紐づく「name="u_telno[x]"」に対して値を入れればいいでしょう実際の処理としては $('[name="u_telno['+x+']"]').val(hogehoge);

yambejp

2018/03/28 01:20

インデックスを利用する方法のsampleをつけておきました

sakura-shi

2018/03/30 14:31

ありがとうございます

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