Блог

Главная - Вопросы по программированию - Как получить elementsbyname при циклическом просмотре имен?

Как получить elementsbyname при циклическом просмотре имен?

#javascript #ajax

#javascript #ajax

Вопрос:

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

Добавленные строки

 let int=0;
function addRow() {

  var tr = '<tr>'   '<td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td>'  
    '<td class="forhead" style="white-space:nowrap;" width="80"><input type="number"  name="items['   (int)   '][inv_quantity]" id="qty[]"  onkeyup="getValues()" style="width: 70px" class="form-control" onBlur=""></td>'  
    '<td><select name="items['   (int)   '][inv_item]" class="form-control item" onChange="pDescription()" >@foreach($product_dup as $dup_product)<option>{{$dup_product->pdt_name}}</option>@endforeach</select></td>'  
    '<td><input type="text" name="items['   (int)   '][inv_desc]" class="form-control description" id="product_desc"></td>'  
    '<td class="forhead" style="white-space:nowrap;" width="150"><input type="text"  name="items['   (int)   '][inv_price]" id="rate[]" onKeyUp="getValues()" class="form-control" value=""></td>'  
    '<td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="items['   (int)   '][inv_total]" id="amt[]" onKeyUp="getValues()"  class="form-control" value=""></td>'  
    '<td width="80" align="right" class="forhead" style="white-space:nowrap;"><select name="items['   (int)   '][inv_tax]" style="width:80px" onChange="getValues()" class="form-control"><option value="0">Select</option><option value="5">5</option><option value="12.5">12.5</option></select></td>'  
    '<td class="forhead" style="white-space:nowrap;" width="80"><input type="text"  name="vat_amt[]" id="vat_amt[]" class="form-control"></td>'  
    '</tr>';
  $('tbody').append(tr);
  int  ;

}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><button type="button" class="btn btn-primary btn-sm" onClick="addRow('dataTable')" ><i class="fa fa-plus" aria-hidden="true"></i> Add Row</button></span>

<table><tbody></tbody></table>

Запрос Ajax

       var int = 0 ;
      function pDescription() {
        var getDescription = document.getElementById('product_value');
        var id = getDescription.value
            $.ajax({
              url: '/get-description/' id,
              dataType: 'JSON',
              type: 'GET',
              success: function (data) {
                document.getElementsByName("items['  (int)  '][inv_price]")[0].value = data
                
              },
              error: function (err) {
            console.log(err);
            }
            });
         getValues();
      }
  
  document.getElementsByName("items['  (int)  '][inv_price]")[0].value = data

у меня не работает. Пожалуйста, как мне правильно это сделать?

Комментарии:

1. name является настраиваемым атрибутом td , gEBN собирает только элементы, имеющие name в качестве собственного свойства (элементы управления формой и элементы окна). Используйте document.querySelectorAll и селектор атрибутов , или, скорее, класс вместо name .

2. Пожалуйста, есть ли способ сделать это? я попрошайничаю в JS

3. пожалуйста, я получаю эту ошибку Uncaught Error: Syntax error, unrecognized expression: input[name=`[${int}][${inv_price}]]

Ответ №1:

  1. Ваши идентификаторы должны быть уникальными или не использовать их. Используйте класс
  2. В любом случае используйте jQuery, который у вас есть:
 $("select").on("change", function() {
  const $parentRow = $(this).closest("tr")
  const id = $parentRow.find("whateverhastheID").data("id"); // ... data-id="theIdYouNeed"
  
  $.ajax({
    url: '/get-description/'   id,
    dataType: 'JSON',
    type: 'GET',
    success: function(data) {
      $parentRow.find(".someClass").value=data;
    },
    error: function(err) {
      console.log(err);
    }
  });
});