HTML Form: Other input required ONLY if other is selected

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'};

我也试图让 this 用于复选框表单。

<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

document.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 循环遍历所有您想要的元素，而不仅仅是其中一个。

请记住：

其他

没有 value="Other"，但 value="OtherAccom"。确保您的 javascript 和 html 彼此一致。

Answer 2

您只能在一个页面（“其他”）上使用 ID一次

您需要重命名其他“其他”并为它们创建单独的函数