选择使字段成为必填项答案

【问题标题】：Selection making a field mandatory选择使字段成为必填项
【发布时间】：2013-04-05 15:33:40
【问题描述】：

我是 JavaScript 新手，我一直在做一项基于用 HTML 和 JavaScript 创建表单的大学作业。在这个作业中，我被要求根据是否在上一个下拉框中选择了特定选项来强制填写一个字段。

如果从下拉列表中选择“UWS Student”或“UWS Staff”，则“Student Number/Staff Number”字段变为必填字段，否则不是必填字段
如果选择“UWS Student”或“UWS Staff”，则“Institution/Company”字段必须自动填写为“University of Western Sydney”

这是我一直在使用的一段：

<b>Registration Category:</b>

<select>
<option value="UWS Student">UWS Student</option>
<option value="Student at another institution">Student at another institution</option>
<option value="UWS Academic">UWS Academic</option>
<option value="Other UWS Staff">Other UWS Staff</option>
<option value="Academic from another Institution">Academic from another      
Institution</option>
<option value="Professional">Professional</option>
<option value="Retired">Retired</option>
</select>

<b>Student Number/Staff Number:</b> <input type="text" name="StudentNumber/StaffNumber">
<br>
<b>Institution/Company:</b> <input type="text" id="txtinstcomp" name="institutioncompany">

</fieldset>

注意：我在“机构/公司”字段上也有一个功能，用于上一个问题，只是为了使提交的文件成为强制性的，如果这很重要的话：

function validateText()
{
var institutioncompany=document.getElementById('txtinstcomp');
if (institutioncompany.value=="")
{
     alert("Institution/company must be filled out");
     return false;
}
}

任何帮助将不胜感激，因为我正在努力掌握 JavaScript

【问题讨论】：

标签： javascript function validation drop-down-menu selection

【解决方案1】：

您必须添加 Id 属性才能选择和输入如下文本字段。

<b>Registration Category:</b>

<select id="cat" onchange="populateInstitution();">
     <option value="UWS Student">UWS Student</option>
     <option value="Student at another institution">
           Student at another institution</option>
     <option value="UWS Academic">UWS Academic</option>
     <option value="Other UWS Staff">Other UWS Staff</option>
     <option value="Academic from another Institution">
           Academic from another Institution</option>
     <option value="Professional">Professional</option>
     <option value="Retired">Retired</option>
</select>
<br>
<b>Student Number/Staff Number:</b> 
<input type="text" id="stNumber" name="StudentNumber/StaffNumber">
<br>
<b>Institution/Company:</b> 
<input type="text" id="txtinstcomp" name="institutioncompany">
<br>
<input type="button" value="submit" onclick="validateText()" />

并且有一个像“populateInstitution”这样的javascript函数用于选择字段上的更改事件

function validateText() {
    var institutioncompany = document.getElementById('txtinstcomp').value;
    if (institutioncompany == "") {
        alert("Institution/company must be filled out");
        return false;
    }
    var cat = document.getElementById('cat').value;
    if (cat == "UWS Student" || cat == "Other UWS Staff") {
        if (document.getElementById("stNumber").value == "") {
            alert('StudentNumber/StaffNumber is mandatory');
            return;
        }

    }
}

function populateInstitution() {
    var cat = document.getElementById('cat').value;
    if (cat == "UWS Student" || cat == "Other UWS Staff") {
         document.getElementById('txtinstcomp').value='University of Western Sydney';
    }else{
        document.getElementById('txtinstcomp').value='';
    }
}

【讨论】：