Want the radio button onClick YES option to show first div "#current_school_details" and No option to show second div "#current_school_details_two"

user_6512140 0
Viewed 44

apologies for the large code, still a newbie and i was working on this prior, the initial javascript code i was helped with worked to show contents of the first div when you select YES, I naively thought if i duplicated it, it would work for the NO, well...it did, but both are showing at the same time.
How can the code be written such that when i click yes it shows (#current_school_details) and when i click No it shows (#current_school_details_two) and replaces or hides the yes option rather than both sitting there.

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 = "none";
  } else {
    current_school_details.style.display = "block";
  }
}

function selectFunctionTwo() {
  var no = document.getElementById("gridRadios2");
  var current_school_details_two = document.getElementById("current_school_details_two");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details_two.style.display = "none";
  } else {
    current_school_details_two.style.display = "block";
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<div>
  <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="javascript: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="javascript:selectFunctionTwo();">
      <label class="form-check-label" for="gridRadios2"> No </label>
    </div>
  </div>
</div>
<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>

<br>

<div id="current_school_details_two">
  <h2>Current School Details</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Current School*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">School Address*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Office Email*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">Current Head of Year*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
</div>
</fieldset>

forms html javascript
2 Answers

I renamed the (current_school_details) references to (current_school_details_one) for clarity in the code, but this works:

main.js

const current_school_details_one = document.getElementById("current_school_details_one");
const current_school_details_two = document.getElementById("current_school_details_two");

function selectFunctionYes() {

    if (document.querySelector('input[name="gridRadios1"]').checked === true) {
      current_school_details_one.style.display = "block";
      current_school_details_two.style.display = "none";
      document.querySelector('input[name="gridRadios2"]').checked = false;
    } 
  }



function selectFunctionNo() {

    if (document.querySelector('input[name="gridRadios2"]').checked === true) {
      current_school_details_two.style.display = "block";
      current_school_details_one.style.display = "none";
      document.querySelector('input[name="gridRadios1"]').checked = false;
    } 
}

index.html

<fieldset>
    <div>
        <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="gridRadios1" id="gridRadios1"  value="option1" onclick="selectFunctionYes();">
              <label class="form-check-label" for="gridRadios1">
              Yes
              </label>
           </div>
           <div class="form-check">
              <input class="form-check-input" type="radio" name="gridRadios2" id="gridRadios2" value="option2" onclick="selectFunctionNo();">
              <label class="form-check-label" for="gridRadios2">
              No
              </label>
           </div>
        </div>
    </div>


    <div id="current_school_details_one">
        <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>

    <br>

    <div id="current_school_details_two">
        <h2>Current School Details</h2>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputCity">Current School*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">School Address*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            </div>
            <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputCity">Office Email*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">Current Head of Year*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
        </div>
    </div>
</fieldset>

Some of the things happening in your JavaScript functions were canceling each other out or not needed, like the var yes = document.getElementById("gridRadios1"); Also, instead of searching for the class with the document.querySelector calls, I switched it to looking the input up directly.

user_144690620

As far as I understand, you want only one of the div's to be visible based on selection. And without selection, they both should be not visible. There is no need to write two functions for radio buttons, One will be enough. And you should add display none to the div's for the initial state.

function selectFunction() {
  var current_school_details = document.getElementById("current_school_details");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details.style.display = "none";
    current_school_details_two.style.display = "block";
  } else {
    current_school_details.style.display = "block";
    current_school_details_two.style.display = "none";
  }
}
<div>
  <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="javascript: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="javascript:selectFunction();">
      <label class="form-check-label" for="gridRadios2"> No </label>
    </div>
  </div>
</div>
<div id="current_school_details" style="display: none">
  <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>

<br>

<div id="current_school_details_two" style="display: none">
  <h2>Current School Details</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Current School*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">School Address*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Office Email*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">Current Head of Year*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
</div>

user_56452110
Related