Question

<html>
    <head>
        <script type="text/javascript" src="datetimepicker_css.js"></script>
        <script type="text/javascript">
            function sel(){
                var y=document.getElementById("demo1").value;
                document.getElementById("cal").innerHTML=y;
            }
        </script>
    </head>
    <?php 
        for($i=0; $i<2; $i++){
    ?> 
    <input type="text" name="doi" required="" placeholder="current inspect date" id="demo1" onchange="sel()" required>
    <a href="javascript:NewCssCal('demo1','ddmmmyyyy','arrow')"><img src="cal.gif" alt="failed to load img"></a>

    <?php
    }
    ?>
    <p id="cal"></p>
</html>

（datetimepicker_css.js is my calender file used to select date）;两个文本框id = demo [选择日历后，当我选择其他日历时，第一个文本会受到影响。选择每个日历后，我需要访问两个文本值。

Answer 1

你可以在这里使用jQuery选择器并更新每个输入框的change事件的值，前提是你应该使用一些常见的选择器，比如名字，类等。

参见下面的代码，其中我使用了class =“doi”作为多个输入并将更改事件处理程序绑定到它。迭代输入以获取任何输入框的on change事件的值。

注意： - 建议不要对多个元素使用相同的ID。这可能会导致脚本问题。请从输入中删除id="demo1"，因为这会创建具有相同ID的多个输入。

<input type="text" name="doi" required="" 
       placeholder="current inspect date" 
       onchange="sel()" required class="doi">
<input type="text" name="doi" required="" 
       placeholder="current inspect date" 
       onchange="sel()" required class="doi">

jQuery：注册处理程序

$(function(){
  $('input.doi').change(function(){
    $("#cal").empty(); // clear cal para
    //set value of each input to cal
    $('input.doi').each(function(){
        $("#cal").append($(this).val() + " , ");
    });      
  });
});

Answer 2

当我选择其他日历时，第一个文字会受到影响。

同一个问题 在单个页面中的多个元素上应用了相同的ID 。

根据有效标记，您应始终在元素上添加唯一ID，并且该ID应唯一。
当你不做你在案例中的元素查找中发生的事情时，浏览器会找到具有给定id的元素：

var y=document.getElementById("demo1").value;

因此，当浏览器获得第一个时，它会根据代码建议返回它的值，但是当您尝试获取第二个时，它仍会返回第一个值。

为什么？

使用给定的id，当浏览器找到具有提供的id的第一个元素时，它会停止文档中的元素查找。

可以做些什么？

您有两种选择：要么提供唯一ID，要么使用公共类名，如：

ID：

<?php 
    for($i=0; $i<2; $i++){
?> 
    <input type="text" name="doi" required="" placeholder="current inspect date" 
           id="demo<?php echo $i+1?>" onchange="sel()" required>
    <a href="javascript:NewCssCal('demo<?php echo $i+1?>','ddmmmyyyy','arrow')">
        <img src="cal.gif" alt="failed to load img">
    </a>

<?php
}
?>

此id="demo<?php echo $i+1?>"会生成唯一ID。

使用公共类名：

<?php 
    for($i=0; $i<2; $i++){
?> 
    <input type="text" name="doi" required="" 
           placeholder="current inspect date" class="demo" onchange="sel(this)" required>
    <a href="javascript:NewCssCal('demo','ddmmmyyyy','arrow')">
        <img src="cal.gif" alt="failed to load img">
    </a>

<?php
}
?>

您可以在此处看到更改onchange="sel(this)"您可以在函数中传递this元素，并将函数更改为接受如下参数：

<script type="text/javascript">
   function sel(el){ // <-----el is the element 'this'
      var y=el.value;
      document.getElementById("cal").innerHTML=y;
   }
</script>

如何访问onchange Javascript中的多个文本框

2 个答案:

为什么？

可以做些什么？