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在相应的Label中显示该值。我目前的JavaScript代码在价值变化方面没有做任何事情：

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

Answer 1

删除表单中的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 2

如果您想要更快更快的反馈，则无法使用change。在模糊输入元素之后执行change事件。您可以添加keyup，keydown等paste。此外，您不需要onchange属性 - 否则为内联绑定和事件侦听器。

＆＃13;

$(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

  });

})

＆＃13;

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

＆＃13;

<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">

＆＃13;

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>

从jQuery中检测PHP foreach中的输入值更改

3 个答案: