javascript - how do we fill some fields of the looped row with what we have chooses in the onchange in jquery?

Question

screenshot Whenever choose the date and rate fields, this data should filled with looped fields which I have marked The admin no need to fill the date and rate fields for every row. Once its chooses it will be automatically filled with all row.

// my html code

 <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. id for rate is #rate, id for date is #date, You can see below this fields.

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

I have tried with some code but its changing only first field .

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

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

    }

标签： javascriptjqueryajaxdate

Answer 1

id 全局属性定义了一个标识符 (ID)，该标识符在整个文档中必须是唯一的。

改变

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

至

class="form-control date"

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

}