从 jQuery 检测 PHP foreach 内的输入值变化

Question

我在表单中有一个 PHP foreach 循环，其中值来自数据库。在这里，输入ID随着循环的元素而增加。

<form class="form-horizontal">
    <?php
        $count = 0;
        foreach ($value as $row) {
            $count += 1;
            echo 
            '<div class="row">
                <div class="form-group">
                    <label id="durationLabel' . $count . '">Duration (days)</label>
                    <input type="number" name="duration_days" value="' . $row['duration_days'] . ' day" class="form-control input-sm" id="durationInput' . $count . '" placeholder="Days" onchange="durationInputChange(this.value,'.$count.')">
                 </div>             
             </div>';
         }
     ?>
</form>

现在，我的问题是，我如何检测是否有任何输入值被更改（基于 ID）并获取该值并使用 jQuery 在相应的标签中显示该值。我当前的 JavaScript 代码对值更改没有任何作用：

function durationInputChange(a,i) { 
    var d = document.getElementById("durationInput"+i).value; 
    alert(d);
}

Answer 1

如果您想要更多更快的反馈，您不能使用change。 change is 事件在输入元素模糊后执行。您可以添加keyup、keydown 以及更多类似paste。此外，内联绑定和事件侦听器不需要onchange 属性--no。

$(function(){
  
  $('input[name="input-1"]').on('keyup change paste keydown', function(){
    
    var $this = $(this); 
    
    console.log($this.attr('id')); // ID; for referencing 
    console.log($this.val()); // value of this input

  });

})

input {
  display:block;
  margin-bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input name="input-1" value="" id="input-1">
<input name="input-1" value="" id="input-2">
<input name="input-1" value="" id="input-3">
<input name="input-1" value="" id="input-4">
<input name="input-1" value="" id="input-5">
<input name="input-1" value="" id="input-6">
<input name="input-1" value="" id="input-7">
<input name="input-1" value="" id="input-8">
<input name="input-1" value="" id="input-9">
<input name="input-1" value="" id="input-10">
<input name="input-1" value="" id="input-11">
<input name="input-1" value="" id="input-12">
<input name="input-1" value="" id="input-13">

Answer 2

删除您在表单中的onchange 操作并将input-duration 添加到类：

<form class="form-horizontal">
    <?php
        $count = 0;
        foreach ($value as $row) {
            $count += 1;
            echo 
            '<div class="row">
                <div class="form-group">
                    <label id="durationLabel' . $count . '">Duration (days)</label>
                    <input type="number" name="duration_days" value="' . $row['duration_days'] . ' day" class="form-control input-sm input-duration" id="durationInput' . $count . '" placeholder="Days">
                 </div>             
             </div>';
         }
     ?>
</form>

将此代码放在文件顶部（或下方）的script 标签内：

$(document).ready(function() {
    $('.input-duration').change(function() {
        // Access changed input element using $(this)

        // Get value
        alert($(this).val());

        // Get ID
        alert($(this).attr('id'));
    });
});

更多关于 jQuery 属性的信息可以在这里找到：https://api.jquery.com/category/attributes/

Answer 3

函数中不需要传递$count，只需使用this.value，它就会传递点击输入的值，你可以像这样直接提醒该值：

$(document).ready(function(){
  $('.form-control').change(function(){
    alert($(this).val());
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="form-group">
    <label id="durationLabel">Duration (days)</label>
    <input type="number" name="duration_days" value="' . $row['duration_days'] . ' day" class="form-control input-sm" id="durationInput1" placeholder="Days">
  </div>             
</div>

<div class="row">
  <div class="form-group">
    <label id="durationLabel2">Duration (days)</label>
    <input type="number" name="duration_days" value="' . $row['duration_days'] . ' day" class="form-control input-sm" id="durationInput2" placeholder="Days">
  </div>             
</div>