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

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是我用来选择日期的日历文件）； 两个文本框id = demo [选择压延机后，当我选择其他压延机时，它可以正确打印第一个文本。 选择每个日历后，我需要访问两个文本值。

Answer 1

您可以在此处使用jQuery选择器，并在每个输入框的change事件上更新值，前提是您应该使用一些常见的选择器，例如名称，类等。

参见下面的代码，其中我对多个输入使用了class =“ doi”，并将更改事件处理程序绑定到它。 迭代输入以获取任何输入框的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 个解决方案

解决方案1
1 2016-01-22 07:20:04

解决方案2
1 2016-01-22 07:41:20

为什么？

该怎么办？

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

问题描述

2 个解决方案

解决方案1 1 2016-01-22 07:20:04

解决方案2 1 2016-01-22 07:41:20

为什么？

该怎么办？

解决方案1
1 2016-01-22 07:20:04

解决方案2
1 2016-01-22 07:41:20