несколько текстовых областей используют один и тот же jquery код в php

Question

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

код, как показано ниже,

<?php foreach($queryRecords as $res) :?>
<td width="160">
            <div class="form-group">
                 <textarea name="date[]" id="" rows="1" class="form-control date"><?php echo $res['date'];?></textarea>  
            </div></td>
<td width="160">
            <div class="form-group"> 
                 <textarea name="action[]" id="" rows="1" class="form-control action"><?php echo $res['action'];?></textarea>  
            </div></td>

<div class="form-group">  
            <input type="hidden" name="id[]" id="" class="form-control id" value="<?php echo $res['id'];?>" />
                 <div class="autoSave_quo"></div>
            </div>  
        </td>
</tr>
<?php endforeach;?>
<script>  
$(document).ready(function(){
var timer_quo;
var timeout_quo = 1000;
$('.date, .action').change(function(){

if(timer_quo) {
clearTimeout(timer_quo);
}
timer_quo = setTimeout(autoSave_quo, timeout_quo); 

});
});

function autoSave_quo(){
    var date = $(this).parent().find('.date').val();
    var action = $(this).parent().find('.action').val();
    var gp_name = $(this).parent().find('.gp_name').val();
    var id = $(this).parent().find('.id').val();
   if(date != '' && gp_name != '')  
   {  
        $.ajax({  
             url:"lotus_cover_ref.php",  
             method:"POST",  
                 data:{date:date, action:action, gp_name:gp_name, id:id},  
             dataType:"text",  
             success:function(data)  
            {  
                  if(data != '')  
                  {  
                       $('.gp_name').val(data);
                       $('.id').val(data);
                  }  
                  $('.autoSave_quo').text(location.reload());  
            }  
    });  
} 
}   
</script>

Answer 1

В вашем function autoSave_quo вы используете $(this), но ваш код не может найти текущий элемент, в котором были внесены изменения, просто поместите $(this) в некоторую переменную, а затем добавьте это в параметр функции .ie: With Фиктивные данные:

$(document).ready(function() {
  var timer_quo;
  var timeout_quo = 1000;
  $('.date , .action').change(function() {

    if (timer_quo) {
      clearTimeout(timer_quo);
    }
    //putting current element in variable current
    var current = $(this)
    //passsing it in function as parameter
    timer_quo = setTimeout(autoSave_quo(current), timeout_quo);

  });
});

function autoSave_quo(current) {
  //using current->div->td->tr->.date to find selected value
  var date = current.parent().parent().parent().find('.date').val();
  console.log(date);
  var action = current.parent().parent().parent().find('.action').val();
  console.log(action);
  var gp_name = current.parent().parent().parent().find('.gp_name').val();
  var id = current.parent().parent().parent().find('.id').val();
  console.log(id);
  if (date != '' && gp_name != '') {
    $.ajax({
      url: "lotus_cover_ref.php",
      method: "POST",
      data: {
        date: date,
        action: action,
        gp_name: gp_name,
        id: id
      },
      dataType: "text",
      success: function(data) {
        if (data != '') {
          $('.gp_name').val(data);
          $('.id').val(data);
        }
        $('.autoSave_quo').text(location.reload());
      }
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
  <tr>
    <td width="160">
      <div class="form-group">
        <textarea name="date[]" id="" rows="1" class="form-control date"><?php echo $res['date'];?></textarea>
      </div>
    </td>
    <td width="160">
      <div class="form-group">
        <textarea name="action[]" id="" rows="1" class="form-control action"><?php echo $res['action'];?></textarea>
      </div>
    </td>

    <td>
      <div class="form-group">
        <input type="hidden" name="id[]" id="" class="form-control id" value="<?php echo $res['id'];?>" />
        <div class="autoSave_quo"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td width="160">
      <div class="form-group">
        <textarea name="date[]" id="" rows="1" class="form-control date"><?php echo $res['date']1;?></textarea>
      </div>
    </td>
    <td width="160">
      <div class="form-group">
        <textarea name="action[]" id="" rows="1" class="form-control action"><?php echo $res['action']1;?></textarea>
      </div>
    </td>

    <td>
      <div class="form-group">
        <input type="hidden" name="id[]" id="" class="form-control id" value="<?php echo $res['id']1;?>" />
        <div class="autoSave_quo"></div>
      </div>
    </td>
  </tr>
</table>