javascript - 如何在ajax中引用文本字段名称？

Question

当用户选择特定名称时，我尝试将数据库中的信息自动填充到文本字段中。我使用动态添加的唯一名称初始化了文本字段。

这是表格的表格:

  <form name="senarai" id="senarai">
        <div class="container table-responsive col-lg-10">
          <table class="table table-hover table-responsive table-bordered" id="demo_table" >
            <thead>
              <tr>
                <td class="text-center col-lg-1">#</td>
                <td class="text-center col-lg-3">Nama</td>
                <td class="text-center col-lg-2">No Personal</td>
                <td class="text-center col-lg-1">Department</td>
                <td class="text-center col-lg-1">Telefon</td>
                <td class="text-center col-lg-1">Ext</td>
              </tr>
            </thead>

            <tbody>
            </tbody>
          </table>

      </form>
        </div>
      </div>
          <!-- buttons -->
        </head>

        <div class="form-group">
          <div class="row">
            <input type="button" class="add-row" value="Add Row">
            <button type="button" class="delete-row">Delete Row</button>
          </div>
        </div>

下面的 JavaScript 动态添加了文本字段。它包含一个选择字段和文本字段，这些字段将填充从数据库中获取的信息。

 <script>
 count=1;
$(document).ready(function(){
    $(".add-row").click(function(){
        var markup = '<tr><td class="col-lg-3"><input type="checkbox" name="rekod"></td>';
        markup +=  '<td class="col-lg-3"><select id="nama'+ count +'" name="nama[]" class="form-control"><option value="">Choose</option><?php foreach($nama as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
        markup +=  '<td class="col-lg-2"><input type="text" name="nopersonal'+ count +'" value="test"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="jabatan'+ count +'"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="telefon'+ count +'"></td>';
        markup +=  '<td class="col-lg-1"><input type="text" name="ext'+ count +'"></td></tr>';
        $("table tbody").append(markup);
        count++;
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="rekod"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });
});    
</script>

这是自动填充文本字段的 JavaScript 代码。

 <script type="text/javascript">
 jQuery(document).ready(function ()
 {
        $(document).on('change','#nama'+ count +'',function(){
           var ID = jQuery(this).val();
           if(ID)
           {
              jQuery.ajax({
                 url : 'add_demo/get_nama/'+ID,
                 type : "GET",
                 dataType : "json",
                 success:function(data)
                 {
                    console.log(data);
                        alert($('input[name="nopersonal'+count+'"]').val());//the problem is here
                        $('input[name="jabatan'+count+'"]').val(data.JabID);
                        $('input[name="telefon'+count+'"]').val(data.notelttp);
                        $('input[name="ext'+count+'"]').val(data.ext);  
                 }
              });
           }
           else
           {
              $('input[name="nopersonal"'+count+']').empty();
              $('input[name="jabatan'+count+'"]').empty();
              $('input[name="telefon'+count+'"]').empty();
              $('input[name="ext'+count+'"]').empty();
           }
        });
});
</script>

我无法将 id 放在文本字段中，它会在控制台中产生问题和警告。我尝试使用文本字段名称属性，但无法识别动态名称​​“nopersonal'+count+'”。

当我尝试这个时:

  alert($('input[name="nopersonal'"]').val()); //i put test value in the textfield

可以识别文本字段，并且值会显示在警报中。

我该如何解决这个问题？谢谢。

编辑:我添加了几行，html如下

   <td class="col-lg-2"><input type="text" name="nopersonal1" value="test"></td>
   <td class="col-lg-2"><input type="text" name="jabatan1" value="test"></td>
   <td class="col-lg-2"><input type="text" name="telefon1" value="test"></td>
   <td class="col-lg-2"><input type="text" name="ext1" value="test"></td>

   <td class="col-lg-2"><input type="text" name="nopersonal2" value="test"></td>
   <td class="col-lg-2"><input type="text" name="jabatan2" value="test"></td>
   <td class="col-lg-2"><input type="text" name="telefon2" value="test"></td>
   <td class="col-lg-2"><input type="text" name="ext2" value="test"></td>

   <td class="col-lg-2"><input type="text" name="nopersonal3" value="test"></td>
   <td class="col-lg-2"><input type="text" name="jabatan3" value="test"></td>
   <td class="col-lg-2"><input type="text" name="telefon3" value="test"></td>
   <td class="col-lg-2"><input type="text" name="ext3" value="test"></td>

文本字段名称按其应有的顺序排列。但如果您注意到的话，控制台中有 14 个“输入”，没有“+count+”。如果我将 id 与“+count+”放在一起，则会出现具有重复 14 个元素的非唯一 id 的控制台。

  selector string: input[name="nopersonal"] selected element: n.fn.init(14) [input, input, input, input, input, input, input, input, input, input, input, input, input, input, prevObject: n.fn.init(1), context: document, selector: "input[name="nopersonal"]"] 

我不确定这是什么原因。你有什么想法吗？

Answer 1

alert($('input[name="nopersonal'+count+'"]').val());//the problem is here                     

您是否尝试过首先将选择器构建为字符串，console.log它以确认它看起来正确，然后然后将其传递给 jQuery？我想知道 count 是否由于某种原因可能存在问题。如果它只是一个数字，JS 会在它成为 jQuery 问题之前将其插入字符串中。

编辑:

jQuery.ajax({
  url : 'add_demo/get_nama/'+ID,
  type : "GET",
  dataType : "json",
  success: function(data) {
    console.log(data);
    //   Changes
    const selectorString = 'input[name="nopersonal'+count+'"]';
    console.log("selector string: ", selectorString, "selected element: ", $(selectorString));
    alert($(selectorString).val());
    //   /Changes
    $('input[name="jabatan'+count+'"]').val(data.JabID);
    $('input[name="telefon'+count+'"]').val(data.notelttp);
    $('input[name="ext'+count+'"]').val(data.ext);  
  }
});