How to show a div section onclick radio button using javascript not jquery:-CodePudding

New to programming and haven't done much javascript before just the html and css. Tried finding examples to do this but still struggling. I used a code i found online and tried to tweak it but i still can't get the "yes" radio button to display the lower div called #current_school_details (which is currently set to display:none in css ). Any help will be appreciated.

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  if (option1.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

<legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
<div class="col-sm-10">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios1">
                        Yes
                        </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios2">
                        No
                        </label>
  </div>
</div>
</div>
<!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO-->
<div id="current_school_details">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

CodePudding user response：

Firstly, Option1 is not defined which will give you a referenceError. And you will get a event object as a parameter which can be accessed to see if radio which as invoked this callback is checked or not

function selectFunction(event) {
  var current_school_details =document.getElementById("current_school_details");
  if (event.target.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

CodePudding user response：

Try something like this:

const toggleCurrentSchool = function(){
    const current_school_details = document.getElementById("current_school_details");
    const isCurrentStudent = document.getElementById("gridRadios1").checked;
    if (isCurrentStudent) {
      current_school_details.style.display = "block";
    } else {
      current_school_details.style.display = "none";
    }
};

document.querySelectorAll("input[name='gridRadios']").forEach(el => {
  el.addEventListener("click", toggleCurrentSchool);
});

toggleCurrentSchool();

<legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
<div class="col-sm-10">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
    <label class="form-check-label" for="gridRadios1">Yes</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
    <label class="form-check-label" for="gridRadios2">No</label>
  </div>
</div>
</div>
<!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO-->
<div id="current_school_details">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

CodePudding user response：

This uses document.querySelector which returns the first match. This works because the YES radio input is the first with the specified class.

I also run the function on page load to hide the select initially.

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

selectFunction();

<legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
<div class="col-sm-10">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios1">
                        Yes
                        </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios2">
                        No
                        </label>
  </div>
</div>
</div>
<!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO-->
<div id="current_school_details">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

CodePudding user response：

Use this.

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  if (yes.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

.current_school_details {
  display:none;
}

<legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
<div class="col-sm-10">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1"  onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios1">
                        Yes
                        </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" onclick="selectFunction();" checked>
    <label class="form-check-label" for="gridRadios2">
                        No
                        </label>
  </div>
</div>
</div>
<!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO-->
<div id="current_school_details" class='current_school_details'>
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>