如何訪問一個以上的文本框在Javascript中使用Javascript

<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 [選擇壓光機後，它會打印正確的，當我選擇其他壓光機時，第一個文本會受到影響。在選擇每個日曆之後，我需要訪問兩個文本值。如何訪問一個以上的文本框在Javascript中使用Javascript

來源

2016-01-22 gnana prakasam

您不清楚與你的問題...你已經成功完成了多少......你想要什麼？ –

你可以改變事件在這裏使用jQuery選擇和更新值的每一個輸入框提供的，你應該使用一些常見的選擇，如姓名，班級等

請參見下面的代碼，在那裏我有對於多個輸入使用class =「doi」並將更改事件處理程序綁定到它。迭代輸入以獲取任何輸入框的更改事件的值。

注意： - 不建議在多個元素中使用相同的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() + " , "); 
    });  
    }); 
});

來源

2016-01-22 07:20:04

兄弟我沒有得到你！ –

這裏我附加了具有'class =「doi」'的所有輸入的點擊事件處理程序。當你改變輸入時，這個函數被調用，其中我用'class =「doi」'迭代所有輸入，並將其值附加到'cal'。這樣您每次更改輸入時都會將所有輸入值添加到'cal'。 –

當我選擇其他壓延第一個文本受到影響。施加上的多個元素在單個頁面

再次相同的相同ID的問題。

根據有效標記，您應始終在您的元素上添加唯一標識，並且應該是唯一標識。
如果你不這樣做，在你的情況元素查找發生了什麼，瀏覽器去與給定ID查找元素：

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

所以當瀏覽器獲得返回的第一個它的價值如代碼所示，但是當你嘗試獲得第二個時，它仍然會返回第一個。

爲什麼？

對於給定的ids，當瀏覽器找到包含提供的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>

來源

2016-01-22 07:41:20 Jai

如何訪問一個以上的文本框在Javascript中使用Javascript

回答

爲什麼？

可以做些什麼？

相關問題