CODEWITHSUNDEEP
javascripthtmlcss
AlwaysLearning
AlwaysLearning

Reputation: 45

Show/Hide Javascript trouble

I found this this script online it is supposed to show'hide text boxes and labels. any changes i make to it will stop it from working if i change divpassword it will not work as well. The issue is that if i check "NO" it hides everything after that. How do I get it to only hide the desired part, and how to i have the checkbox set to no as default?

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<span>Do you have More Education?</span>
<label for="chkYes">
       <input type="radio" id="chkYes" checked name="chkEducation" 
    onclick="ShowHideDiv()" />
       Yes
    </label>
<label for="chkNo">
       <input type="radio" id="chkNo" name="chkEducation" onclick="ShowHideDiv()"/> 
        No
    </label>

I tried to end it by or body and start a new head but it didn't help. thank you.

Upvotes: 1

Views: 164

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

To begin, to set "no" as the default, you simply move the word "checked" from the Yes input to the no input:

<input type="radio" id="chkNo" **checked** name="chkEducation" onclick="ShowHideDiv()"/>

I surrounded your code with a div (id dvPassport) to recreate your issue. One way to resolve the issue would be to use a section tag within your div around your radio buttons. I have inserted a paragraph tag after the section to demonstrate the effect (if someone switched to YES and then back to NO for instance)

Hope this helps

Rachel

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    //var dvPassport = document.getElementById("dvPassport");
    var education = document.getElementById("edu");
    //dvPassport.style.display = chkYes.checked ? "block" : "none";
    education.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<div id="dvPassport">
 
 <section id="edu">    
    <span>Do you have More Education?</span>
    <label for="chkYes">
       <input type="radio" id="chkYes" name="chkEducation" 
    onclick="ShowHideDiv()" />
       Yes
    </label>
    <label for="chkNo">
       <input type="radio" id="chkNo" checked name="chkEducation" onclick="ShowHideDiv()"/> 
        No
    </label>
  </section>

  <p>hello</p>
  
</div>

Upvotes: 2

Andrea Naspi
Andrea Naspi

Reputation: 119

To set "no" as default set the input type="radio" with id="chkNo" in the html as checked (now the checked element is the inpu type="radio" with id="chkYes") and set the div with id="dvPassport" in the html with style="display:none". The function ShowHideDiv seems correct, to hide only the elements you want just set the id="dvPassport" on a div containing ONLY the text boxes and labels. Example:

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<span>Do you have More Education?</span>
<label for="chkYes">
       <input type="radio" id="chkYes" name="chkEducation" 
    onclick="ShowHideDiv()" />
       Yes
    </label>
<label for="chkNo">
       <input type="radio" id="chkNo" checked name="chkEducation" onclick="ShowHideDiv()"/> 
        No
</label>
<div id="dvPassport" style="display:none">
  <br/>
  <input type="text" placeholder="text1"/>
  <br/><br/>
  <input type="text" placeholder="text2"/>
<div>

Upvotes: 3

Related Questions