时间戳

首页 > 解决方案 > 多个textarea在php中使用相同的jquery代码

jquery - 多个textarea在php中使用相同的jquery代码

问题描述

我有一个代码，它有多个 textarea 需要在数据更新时将值自动保存到数据库中，我使用类而不是 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>

标签： jquery

解决方案

在您function autoSave_quo正在使用$(this)但您的代码无法找到已进行更改的当前元素，只需放入$(this)一些变量，然后将其添加到函数参数 .ie 中：使用虚拟数据：

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

推荐阅读