CODEWITHSUNDEEP
javascriptphphtmlradio-buttonhtml-select
Neal23
Neal23

Reputation: 79

Dropdown lists after radio buttons are selected

I have created a set of 2 radio buttons. If 'Yes' is selected, a dropdown list will appear. Any of the options in the dropdown list can be chosen. If the user chooses the option 'Front Desk Officer', two radio buttons will appear below with the choices of 'Receptionist' & 'Clerk'. If the user chooses the option 'Others', an optional textbox will appear for the user to type the position not listed in the dropdown list. Until this part is all good for me.

What I want is create another dropdown list if the 'No' radio button is selected. That 2nd dropdown list will consist of 'Front Desk Officer' and 'Others'. If the user chooses the option 'Front Desk Officer', two radio buttons will appear below with the choices of 'Receptionist' & 'Clerk'. If the user chooses the option 'Others', an optional textbox will appear for the user to type the position not listed in the dropdown list.

This is because the FDO job and Others can be applied to both Permanent and Relief jobs. I tried creating another div but I know I could not use the same id twice. How do I solve this?

I have provided the code in a link - https://jsfiddle.net/7ksatyaq/

<!DOCTYPE html>
<html lang="en">
<head>

    <script type="text/javascript">
  function checkPhyDis(phydis) {
    //Hide all jobs
    var tasks = document.querySelectorAll("#task1, #task2");
    [].forEach.call(tasks, function(task) {
      task.style.display = 'none';
    })

    if (phydis === "Front Desk Officer (FDO)")
      document.getElementById('task1').style.display = 'block';

    else if (phydis === "Others")
      document.getElementById('task2').style.display = 'block';
  }
</script>

</head>

<body>


    <h3 style="text-decoration: underline">Position Applied -</h3>


      <p>
          <b>Permanent or Relief?</b><b style="color: red"> *</b>
          <div class="editfield">
             <label><input type="radio" class="PR" name="PermRelief" id="yesid" value="Yes" onclick="document.getElementById('PermRelief').style.display='block'" required> Yes </label>
            <label><input type="radio" class="PR" name="PermRelief" id="noid" value="No" onclick="document.getElementById('PermRelief').style.display='none'" required> No </label>
            </div>


<div class="editfield" id="PermRelief" style="display:none">
    <label for="Position1">Permanent Job:</label>
    <br>
    <select name="Position1" id="Position1" onchange='checkPhyDis(this.value)'>
      <option value="Security Officer (SO)">Security Officer (SO)</option>
      <option value="Senior Security Officer (SSO)">Senior Security Officer (SSO)</option>
      <option value="Supervisor (SS)">Supervisor (SS)</option>
      <option value="Senior Supervisor (SSS)">Senior Supervisor (SSS)</option>
      <option value="Chief Security Officer (CSO)">Chief Security Officer (CSO)</option>
      <option value="Security Executive (SE)">Security Executive (SE)</option>
      <option value="Operation Executive (OE)">Operation Executive (OE)</option>
      <option value="Front Desk Officer (FDO)">Front Desk Officer (FDO)</option>
      <option value="Others">Others</option>
    </select>


    <div id="task1" name="Position1" style="display:none;">
      <label><input type="radio" name="FDO" id="Receptionistid" value="Receptionist"> Receptionist </label>
      <label><input type="radio" name="FDO" id="Clerkid" value="Clerk"> Clerk </label> <br>
    </div>


    <div id="task2" name="Position1" style="display:none;">
      <label for="Others">If the position you want to apply is not stated in any of the options <br> please state in the box below:</label>
      <br>
      <textarea rows="4" cols="50" name="Other_Position" id="Other_Position"></textarea>
    </div>
  </div>
</p>


</body>
</html>

Upvotes: 2

Views: 385

Answers (1)

Andreas
Andreas

Reputation: 431

I did a quick and dirty enhancement to your code, have a look at it.

I think you get the concept, but I would suggest following:

  • Outsource onClick methods, so your code gets more readable
  • Make also sure the div, which I called smalllist and fulllist get hidden again, when user changes the options "yes to no" or vice versa.

To prevent that an option gets stored, which a user never really choosed add an option with an empty value. 

<select name="Position1" id="Position1" onchange='checkPhyDis(this.value)'>
    <option value="">Please choose an option..</option>
    <option value="Senior Security Officer (SSO)">Senior Security Officer (SSO)</option>
    <option value="Supervisor (SS)">Supervisor (SS)</option>
    <!-- your other options... -->
</select>

Then, by default an empty option is selected (so this option with empty value has to be always an top of the other options!)

Link to Jsfiddle

A second approach would be to disable options via javascript. By doing this, the options are visible to the user but not selectable.

Upvotes: 2

Related Questions