Как мы можем заполнить некоторые поля зацикленной строки с тем, что мы выбираем в onchange в jquery? - PullRequest
Новая
       2

Как мы можем заполнить некоторые поля зацикленной строки с тем, что мы выбираем в onchange в jquery?

0 голосов
/ 29 сентября 2019

снимок экрана Когда бы вы ни выбирали поля даты и курса, эти данные должны заполняться зацикленными полями, которые я пометил. Администратору не нужно заполнять поля даты и курса для каждой строки. Как только он выберет, он будет автоматически заполнен всей строкой.

// мой html-код 

 <div class="col-md-3">
     <div class="form-group" style="padding-right:10px; width:100%;">
      <input type="month" name="pickmonth" id="pickmonth"  class="form-control" value="<?php echo date('Y-m'); ?>">
      </div>
  </div>
   <div class="col-md-3">
     <div class="form-group" style="padding-right:10px; width:100%;">
         <select class="custom-select " name="empDesignation" id="empDesignation">
                <option selected>Choose Rate</option>
                <?php foreach($rates as $rate){ ?>
                <option value="<?php echo $rate['rate_amount']; ?>"><?php echo $rate['rate_amount']; ?></option>
                <?php } ?>

          </select>
    </div>
  </div>

// ajax looped data. идентификатор для скорости равен #rate, идентификатор для даты равен #date, вы можете увидеть под этими полями. 

 success: function(data) {                   
                    var html = '';
                    var i;
                    for (i = 0; i < data.length; i++) {
                        html += '<tr>' +
                            '<td>' + data[i].emp_name +
                            '<input type="hidden" class="form-control" id="emp_id"  name="emp_id"  required value="' +
                            data[i].emp_id + '"> </td>' +
                            '<td>' + data[i].cat_name +
                            '<input type="hidden" class="form-control" id="cat_id"  name="cat_id" required value="' +
                            data[i].cat_id + '"></td>' +
                            '<td>' + data[i].emp_account_number + '</td>' +
                            '<td>' +
                            '<input type="text"  class="form-control" id="attendance"  name="attendance" placeholder="Attendance" required>' +
                            '</td>' +
                              '<td>' +
                            '<input type="text" class="form-control" id="rate"  name="rate" placeholder="Rate" required>' +
                            '</td>' +
                            '<td>' +
                            '<input type="text" class="form-control" id="cdf"  name="cdf" placeholder="CDF" required>' +
                            '</td>' +
                               '<td>' +
                            '<input type="text" class="form-control" id="lic"  name="lic" placeholder="LIC" required>' +
                            '</td>' +
                            '<td>' + '<div id="loanBalance" style="display:none;color:#02c0ce; max-width: 100%; padding: .469rem .469rem; font-size: 14px;  ">Balance Amount: <span id="balance"></span></div>' +

                            '<input type="text" class="form-control" id="loan"  name="loan" placeholder="Loan" required>' +
                            '</td>' +
                            '<td>' +
                            '<input style="display:block;"  class="form-control" id="date" autocomplete="off" name="date" placeholder="mm/dd/yyyy Choose Date" >' +
                            '</td>' +
                            '<td>' +
                            '<button  type="button" class="btn btn-primary item-edit" id="btnSave">Submit</button>' +
                            '</td>' +

                            '</tr>';
                    }
                    $('#salaryData').html(html);

                    // $('#salaryData').html(data);
                },

Я пробовал с каким-то кодом, но менялось только первое поле. 

var date_input = document.getElementById('pickmonth');
    date_input.valueAsDate = new Date();

    date_input.onchange = function(){
       let choosenDate = this.value;
       $('#date').attr('value',choosenDate);

    }

1 Ответ

0 голосов
/ 29 сентября 2019

Глобальный атрибут id определяет идентификатор (ID), который должен быть уникальным во всем документе.

изменить 

class="form-control" id="date"

на 

class="form-control date"

// then
date_input.onchange = function(){
  let choosenDate = this.value;
  $('.date').attr('value',choosenDate);

}
...