Search code examples
javascriptphphtmlradio-button

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>


Solution

  • 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();"