javascript

Last week, for work, I had to design an online form for an invitation to a seminar. One of the requirements of the form was that it had to have a drop-down box with several selections for dietary requirements, but if a user's selection wasn't offered, he or she could select "Other", upon which another form element (text field) magically appeared beside it to allow the user to enter in their custom dietary requirement.

To do this, I used JavaScript as demonstrated below:

<script language="JavaScript">
 <!--//
 function checkDietRequrements(req) {
  if (req == "other") {
   document.getElementById('dietReqs').value = '';
   document.getElementById('dietReqs').style.display = 'block';
  } else {
   document.getElementById('dietReqs').value = req;
   document.getElementById('dietReqs').style.display = 'none';
  }
 }
 //-->
</script>

<form>
<table>
<tr>
 <th>Dietary Requirements:</th>
 <td>
  <select name="diet_requirements" onchange="javascript:checkDietRequrements(this.value);">
   <option value="" selected="selected">---</option>
   <option value="ceoliac">Ceoliac</option>
   <option value="kosher">Kosher</option>
   <option value="lowfat">Low Fat</option>
   <option value="vegan">Vegan</option>
   <option value="vegetarian">Vegetarian</option>
   <option value="other">Other, please specify</option>
  </select>
 </td>
 <td><input id="dietReqs" name="diet_requirements" type="text" style="display:none;" /></td>
</tr>
</table>
</form>

Please view the working example here and remember to select "Other" from the the drop-down menu.