Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to hide/show div on radio button change

byMR
January 12, 2022

I am trying to hide two rows on radio button change.
I have a question (Is your postal address the same as your residential address), Asking user with radio buttons labelled YES/NO
If the user check YES the two rows remain unchecked, if they check NO the div will be displayed to them now all working fine but when I check NO but it displayed it like this enter image description here

but it is supposed to show me like this
enter image description here Here is my code `

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="HTML5 Template" />
  <meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" />
  <meta name="author" content="potenzaglobalsolutions.com" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Recruitment</title>

  <!-- online Bootsrtap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
    /*a:link {
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
    }*/
    
    input[type='radio'] {
      transform: scale(2);
    }
    
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  </style>


</head>

<body>
  <div class="wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="content-wrapper" style="margin-left:0px">
          <div class="page-title">
            <div class="row">
              <div class="col" style="text-align:center;font-size: 25px;font-family: sans-serif;">
                <h4 class="mb-0">Application Form</h4>
              </div>
            </div>
          </div>
          <br/>
          <br/>
          <div class="card">
            <div class="card-body">
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="emailAddr"><b>Current Email Address</b></label>
                </div>
                <div class="col-3">
                  <input required type="email" style="width:300px" class="form-control" id="emailAddr">
                </div>
                <div class="col-3">
                  <label class="control-label" for="phonenum"><b>Mobile number</b></label>
                </div>
                <div class="col-3">
                  <input required type="number" style="width:300px" class="form-control" id="phonenum">
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="surname"><b>Surname</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="surname" name="surname" />
                </div>
                <div class="col-3">
                  <label class="control-label" for="givenname"><b>Given name</b></label>

                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="givenname" name="givenname" />
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="preferredname"><b>Preferred name</b></label>

                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="preferredname" name="preferredname">
                </div>
                <div class="col-3">
                  <label class="control-label" for="streetaddress"><b>Street address</b></label>

                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" autocomplete="off" class="form-control" id="streetaddress" name="streetaddress">
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="status"><b>State</b></label>
                </div>
                <div class="col-3">
                  <select class="form-control" style="width:300px" id="state" name="state">
                    <option value="0">Select State</option>
                    <option value="1">QLD</option>
                    <option value="2">NSW</option>
                    <option value="3">VIC</option>
                    <option value="4">TAS</option>
                    <option value="5">ACT</option>
                    <option value="6">WA</option>
                    <option value="7">SA</option>
                    <option value="8">NT</option>
                  </select>
                </div>
                <div class="col-3">
                  <label class="control-label" for="postcode"><b>Postcode</b></label>
                </div>
                <div class="col-3">
                  <input required type="number" style="width:300px" autocomplete="off" class="form-control" id="postcode" name="postcode">
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="postalcheck"><b>Is your postal address the same as your residential address</b></label>
                </div>
                <div class="col-3">
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" onchange="getValue(this)">
                    <label class="form-check-label" for="inlineRadio1">&emsp;<b>Yes</b></label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2" onchange="getValue(this)">
                    <label class="form-check-label" for="inlineRadio2">&emsp;<b>No</b></label>
                  </div>
                </div>
                <div class="col-3">
                  <label class="control-label" for="resume"><b>Upload a recent copy of your resume</b></label>
                </div>
                <div class="col-3">
                  <input type="file" id="resume" name="resume">
                </div>
              </div>
              <br><br>
              <div class="row" id="postalone">
                <div class="col-3">
                  <label class="control-label" for="postalstate"><b>Postal: State</b></label>
                </div>
                <div class="col-3">
                  <select class="form-control" style="width:300px" id="state" name="state">
                    <option value="0">Select Postal State</option>
                    <option value="1">QLD</option>
                    <option value="2">NSW</option>
                    <option value="3">VIC</option>
                    <option value="4">TAS</option>
                    <option value="5">ACT</option>
                    <option value="6">WA</option>
                    <option value="7">SA</option>
                    <option value="8">NT</option>
                  </select>
                </div>
                <div class="col-3">
                  <label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
                </div>
              </div>
              <br><br>
              <div class="row" id="postaltwo">
                <div class="col-3">
                  <label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
                </div>
              </div>
              <br><br>
              <p class="text-muted pt-3 mb-0 mt-2 border-top"></p>
              <br><br>
              <div class="row">
                <div class="col">
                  <h3>Screening Questions</h3>
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="postalstate"><b>Q1</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="postalstate" name="postalstate" />
                </div>
                <div class="col-3">
                  <label class="control-label" for="fname"><b>Q2</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" />
                </div>
              </div>
              <br><br>
              <div class="row">
                <div class="col-3">
                  <label class="control-label" for="postalstate"><b>Q3</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="postalstate" name="postalstate" />
                </div>
                <div class="col-3">
                  <label class="control-label" for="fname"><b>Q4</b></label>
                </div>
                <div class="col-3">
                  <input required type="text" style="width:300px" class="form-control" id="LevelOfExperience" name="LevelOfExperience" />
                </div>
              </div>
              <br><br>
              <p class="text-muted pt-3 mb-0 mt-2 border-top"></p>
              <br>
              <div class="row">
                <div class="col-9"></div>
                <div class="col-3 text-right">
                  <input type="button" class="btn-lg btn-outline-primary" value="Apply" onclick="SaveApplication();">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <!-- online bootstrap -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  <script>
    function getValue(radio) {
      if ((radio.value) == 1) {
        document.getElementById("postalone").style.display = "none";
        document.getElementById("postaltwo").style.display = "none";
      } else {
        document.getElementById("postalone").style.display = "block";
        document.getElementById("postaltwo").style.display = "block";
      }
    }
  </script>
</body>

</html>

`

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Remove the style tag from your columns and use a single div tag and put all inputs in side that. then use the code to hide the div.

<div id="postal" style="display: none;" >   
    <div class="row" >
        <div class="col-3">
        <label class="control-label" for="postalstate"><b>Postal: State</b></label>
        </div>
        <div class="col-3">
            <select class="form-control" style="width:300px" id="state" name="state">
            <option value="0">Select Postal State</option>
            <option value="1">QLD</option>
            <option value="2">NSW</option>
            <option value="3">VIC</option>
            <option value="4">TAS</option>
            <option value="5">ACT</option>
            <option value="6">WA</option>
            <option value="7">SA</option>
            <option value="8">NT</option>
            </select>
        </div>
        <div class="col-3">
        <label class="control-label" for="postpostcode"><b>Postal: Postcode</b></label>  
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="postpostcode" name="postpostcode">
        </div>
    </div>


    <br><br>

    <div class="row" id="postaltwo">      
        <div class="col-3">
        <label class="control-label" for="poststraddr"><b>Postal: Street address</b></label>
        </div>
        <div class="col-3">
        <input required type="text" style="width:300px" class="form-control" id="poststraddr" name="poststraddr">
        </div>
    </div>
</div>

use less javascript code.

function getValue(radio) {
    if ((radio.value) == 1) {
        document.getElementById("postal").style.display = "none";
    } else {
        document.getElementById("postal").style.display = "block";
    }
}
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading