CODEWITHSUNDEEP
javascriptfunctionvalidationdrop-down-menuselection
bigsenator
bigsenator

Reputation: 19

Selection making a field mandatory

I am new to JavaScript and I have been doing a university assignment based around creating a form in HTML and JavaScript. In this assignment I have been asked to make a field mandatory based on whether a specific option was chosen in the previous drop-down box.

  1. if 'UWS Student' or 'UWS Staff' is selected from the drop-down list than the field 'Student Number/Staff Number' becomes mandatory otherwise it is not a mandatory field

  2. If 'UWS Student' or 'UWS Staff' is selected than the field 'Institution/Company' must be automatically filled in with 'University of Western Sydney'

Here is a segment I have been using:

<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>

NOTE: i also have a function over the 'Institution/Company' field for a previous question just to make the filed mandatory, if that matters at all:

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

Any help would be greatly appreciated as i am struggling to get a grasp of JavaScript

Upvotes: 0

Views: 5424

Answers (1)

DDK
DDK

Reputation: 1038

You must add Id attributes to select and input text fields like below.

<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()" />

and have a javascript function like 'populateInstitution' for change event on select field

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

Upvotes: 1

Related Questions