HTML窗體：需要其他輸入只有在選擇了其他輸入的情況下

Question

我目前正在使用一組選項的窗體。在一些問題上，用戶可以選擇「其他」選項。我試圖讓它看起來只有「其他」被選中（我已經得到這個工作的第一個問題，但沒有其他人）。我也試圖只在他們選擇它時才需要這個輸入，以便他們不能提交已選擇「其他」的表單並將其留空。

這是我的HTML和JavaScript製作時選擇其他文本輸入顯示：

<label for="Accom">Question</label> 
    <table> 
     <tr> 
      <td><select name="Accom"> 
       <option value="">Select...</option> 
       <option value="Handicapped">Handicap Accessibility</option> 
       <option value="Hearing Impaired">Hearing Impaired</option> 
       <option value="Visually Impaired">Visually Impaired</option> 
       <option value="OtherAccom">Other</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="4"> 
       <label style="" id="other">If Other, Please Specify 
       <input type="text" name="Other_Accom" size="20"></label></td><tr></table> 

。

window.onload=function() { 
var other = document.getElementById('other', 'otherAccom','otherDiet');; 
other.style.display = 'none'; 
document.getElementsByName('Title', 'Diet', 'Accom')[0].onchange = function() {other.style.display =(this.value=='Other')? '' : 'none'}; 

我也試圖得到這個工作的複選框形式。

<label for="Interests">Question</label><br> 
      <input class="checkbox2" TYPE="checkbox" NAME="formInterests[]" required value="Use Cases ||" />Use Cases<br> 
      <input class="checkbox2" TYPE="checkbox" NAME="formInterests[]" required value="Other" />Other<br> 
      <label style="" id="other">If Other, Please Specify 
       <input type="text" name="Other_Interests" size="20"></label> 

非常感謝！編輯1：當我嘗試和複製功能，它停止工作的一切。

window.onload=function() { 
var other = document.getElementById('other', 'otherAccom', 'otherDiet');; 
other.style.display = 'none'; 
document.getElementsByName('Title')[0].onchange = function() {other.style.display = (this.value=='Other')? '' : 'none'}; 
}; 

window.onload=function() { 
var otherDiet = document.getElementById('other', 'otherAccom', 'otherDiet');; 
otherDiet.style.display = 'none'; 
document.getElementsByName('Diet')[0].onchange = function() {otherDiet.style.display = (this.value=='OtherDiet')? '' : 'none'}; 
}; 

Answer 1

可以在頁面（「其他」）

則需要重命名這些其他的「他人」，併爲他們

Answer 2

文檔創建單獨的功能上使用的ID只一次。 getElementsByName（'Title'，'Diet'，'Accom'）[0] .onchange = function（）{other.style.display =（this.value =='Other'）？ '' ： '沒有'};

這將選擇元件的陣列，通過它來通過訪問[0]，這意味着您定位所述第一元件（這將是第一顯示在DOM中的三個），並添加的onChange偵聽器，以它。 這個結果，就像你自己說：

（我已經得到這對第一個問題的工作，但不是別人）

因爲你實際上只對三的一個運行代碼元素。通過所有你想要的元素

document.getElementsByName('Title', 'Diet', 'Accom').forEach(function(element) { 
    element.onChange = function() { 
    var target = document.getElementById('Other'+this.name); 
    if(this.options[this.selectedIndex].value=='Other') { 
     target.style.display = 'block'; 
    } else { 
     target.style.display = 'none'; 
    } 
    }; 
}); 

基本思路是使用foreach循環，他們的而不是隻有一個：

你應該使用類似。

記住：

<期權價值= 「OtherAccom」>其他< /選項>

沒有價值= 「其他」，但值= 「OtherAccom」。確保你的javascript和html與海誓山盟是一致的。