Sélection rendant un champ obligatoire

Question

Je suis novice en JavaScript et j'ai effectué une mission universitaire en créant un formulaire en HTML et JavaScript. Dans cette tâche, il m'a été demandé de rendre un champ obligatoire en fonction du choix d'une option spécifique dans la liste déroulante précédente.

1. si « UWS étudiant » ou « UWS personnel » est sélectionné dans la liste déroulante que le champ « numéro d'étudiant/Personnel Nombre » devient obligatoire sinon il n'est pas un champ obligatoire

2. Si « UWS étudiant » ou « UWS personnel » est sélectionné que le champ « Institution/Société » doit être automatiquement rempli avec « University of Western Sydney »

Voici un segment que j'utilise:

<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 ont également une fonction sur le champ « Institution/Société » pour une question précédente juste pour le dépôt obligatoire, si cela importe du tout:

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

Toute aide serait grandement appréciée comme je me bats pour obtenir une compréhension de JavaScript

Answer 1

Vous devez ajouter des attributs Id pour sélectionner et entrer des champs de texte comme ci-dessous.

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

et ont une fonction javascript comme 'populateInstitution' pour l'événement de changement sur le champ de sélection

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