Как обозначить имя текстового поля в ajax? - PullRequest
Новая
       17

Как обозначить имя текстового поля в ajax?

0 голосов
/ 04 февраля 2020

Я пытаюсь автоматически заполнить информацию из базы данных в текстовые поля, когда пользователь выбирает указанное c имя. Я инициализировал текстовые поля с уникальными именами, которые добавляются динамически.

Это таблица для формы: 

  <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>

Я не могу поставить идентификатор в текстовые поля, это создает проблемы и предупреждения в консоли. Я пытался использовать свойство имени текстового поля, но невозможно определить динамическое c имя "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 элементами неуникальным идентификатором. 

  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"]"]

Я не уверен, причина этого. У вас есть идеи?

1 Ответ

1 голос
/ 04 февраля 2020 
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);  
  }
});
...