Question

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

如果从下拉列表中选择“UWS学生”或“UWS工作人员”而不是“学生编号/工作人员编号”字段成为必填项，否则它不是必填字段
如果选择“UWS学生”或“UWS工作人员”而不是“机构/公司”字段必须自动填写“西悉尼大学”

以下是我一直使用的细分：

<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

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

选择使字段强制执行

1 个答案: