I am trying to autofill information from a database into text fields when the user selects the specific name. I initialized the text fields with unique names that are dynamically added.

This is the table for the form:

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

            {amp}lt;tbody{amp}gt;
            {amp}lt;/tbody{amp}gt;
          {amp}lt;/table{amp}gt;

      {amp}lt;/form{amp}gt;
        {amp}lt;/div{amp}gt;
      {amp}lt;/div{amp}gt;
          {amp}lt;!-- buttons --{amp}gt;
        {amp}lt;/head{amp}gt;

        {amp}lt;div class="form-group"{amp}gt;
          {amp}lt;div class="row"{amp}gt;
            {amp}lt;input type="button" class="add-row" value="Add Row"{amp}gt;
            {amp}lt;button type="button" class="delete-row"{amp}gt;Delete Row{amp}lt;/button{amp}gt;
          {amp}lt;/div{amp}gt;
        {amp}lt;/div{amp}gt;

The javascript below added the text field dynamically. It contains a selection field and text fields which will be filled with information grabbed from the database.

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

This is a javascript code to autofill the text fields.

 {amp}lt;script type="text/javascript"{amp}gt;
 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();
           }
        });
});
{amp}lt;/script{amp}gt;

I cannot put id on the text fields, it creates problems and warning in the console. I tried to use text field name property but the dynamic name «nopersonal’ count ‘» cannot be identified.

When i tried this:

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

The text field can be identified and the value appears in the alert.

How I can fix this issue? Thank you.

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

Have you tried building the selector first as a string, console.loging it to confirm that it looks right, and then passing it in to jQuery? I’m wondering if there might be an issue with count for some reason. If it were just a number, JS would be interpolating it into the string before it ever became a jQuery problem.

EDIT:

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);  
  }
});