如何訪問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