Mustafa Shafout Mustafa Shafout - 1 month ago 4
HTML Question

how to show and hide field based on radio button

i have a radio button question that have yes or no answers . i need to show and hide the next fields depend on the radio button answer , if yes show the field if no keep them hide .

here is my code

<?php
if(form_error('HSC'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="HSC" class="col-sm-2 control-label">
<?=$this->lang->line("student_have_hs")?>
</label>
<div class="col-sm-3">
<input type="radio" name="HSC" value="Yes">Yes<br> <input type="radio" name="HSC" value="No"> No<br>
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('HSC'); ?>
</span>
</div>

<?php
if(form_error('student_date_of_graduate'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="student_date_of_graduate" class="col-sm-2 control-label">
<?=$this->lang->line("student_date_of_graduate")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="student_date_of_graduate" name="student_date_of_graduate" value="<?=set_value('student_date_of_graduate')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('student_date_of_graduate'); ?>
</span>
</div>

<?php
if(form_error('schoolname'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="name_id" class="col-sm-2 control-label">
<?=$this->lang->line("student_schoolname")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="schoolname" name="schoolname" value="<?=set_value('schoolname')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('schoolname'); ?>
</span>
</div>

<?php
if(form_error('specialty'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="specialty" class="col-sm-2 control-label">
<?=$this->lang->line("student_specialty")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="specialty" name="specialty" value="<?=set_value('specialty')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('specialty'); ?>
</span>
</div>

<?php
if(form_error('average'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="average" class="col-sm-2 control-label">
<?=$this->lang->line("student_average")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="average" name="average" value="<?=set_value('average')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('average'); ?>
</span>
</div>


any one can help please because i dont have too many experience with javascript

Answer

Here is basic example by using javascript:

Radio Buttons:

<input type="radio" name="HSC" value="Yes" onChange="getValue(this)">Yes<br> 
<input type="radio" name="HSC" value="No" onChange="getValue(this)"> No<br> 

Here, i am using onchange() event for value changes.

Your Div:

<div id="yourfield" style="display:none;"> 
   Hide Me: Place your all four fields here
   student_date_of_graduate , 
   average , 
   schoolname and 
   specialty
</div>

You need a identifier id="yourfield" for perform changes like show and hide the specific div.

Script:

<script type="text/javascript">
function getValue(x) {
  if(x.value == 'No'){
    document.getElementById("yourfield").style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById("yourfield").style.display = 'block';  // you need a identifier for changes
  }
}
</script>

Simple javascript function, which only use to show or hide your div according to radio button value.