選擇使字段為必填項

Question

我是JavaScript的新手，我一直在做大學作業，圍繞以HTML和JavaScript創建表單為基礎。 在此作業中，系統要求我根據上一個下拉框中是否選擇了特定選項來使字段為必填字段。

1. 如果從下拉列表中選擇“ UWS學生”或“ UWS職員”，則“學生人數/職員人數”字段變為必填字段，否則不是必填字段

2. 如果選擇了“ 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='';
    }
}