Hide html content based on radio selection

Hi I’m fairly new to php/html and Im having trouble with hiding the inputs based on my radio input selection. I want to be able to hide the rest of the inputs if “yes” is selected but nothing happens. Any help would be greatly appreciated. Thanks.

<script type="text/javascript">
function yesnoCheck() {
    if (document.getElementById('yescheck').checked) {
        document.getElementById('IfYes').style.display = 'none';
    } else {
        document.getElementById('IfYes').style.display = 'block';
    }
</script>

<li>
<label><b>Did Line Stop? </b></label> <br/>
<input type="radio" onclick="javascript:yesnoCheck();" name="linestop" value="Yes" id="yescheck"  >Yes <br/>
<input type="radio" onclick="javascript:yesnoCheck();" name="linestop" value="No" id="nocheck"   >No
</li>
</br>

    

   
	
	

<div id="IfYes">


<label><b>If Line Stopped: </b></label> <br/>


<div style="line-height:2em;">
<li>
<label><b>Time Down: </b></label>
<input type="text" size="1" maxlength="2" name="timedownhour"> : 
<input type="text" size="1" maxlength="2" name="timedownminute"> 
<select class="element select" style="width:4em" id="element_2_5" name="timedownampm">
<option value="AM" >AM</option>
<option value="PM" >PM</option>
</select>
<label><b>AM/PM</b></label><br/>
</li>
</div>


<div style="line-height:2em;">
<li>
<label><b>Time Up: </b></label> &nbsp; &nbsp;
<input type="text" size="1" maxlength="2" name="timeuphour"> : 
<input type="text" size="1" maxlength="2" name="timeupminute"> 
<select class="element select" style="width:4em" id="element_2_4" name="timeupampm">
<option value="AM" >AM</option>
<option value="PM" >PM</option>
</select>
<label><b>AM/PM </b></label><br/>
</li>
</div>


</div>

Answer

Make sure your function block is closed properly:

function yesnoCheck() {
      if (document.getElementById('yescheck').checked) {
          document.getElementById('IfYes').style.display = 'none';
      } else {
          document.getElementById('IfYes').style.display = 'block';
      }
  }

remove javascript: from

onclick=”javascript:yesnoCheck();”

Advertisement

Answer