Radio-button-change-event

by Ankit Verma

HTML

<div class="form-group">
  <div class="form-row">
    <div class="col-md-2"></div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" value="old" name="studOldNew" class="custom-control-input custom-radio-button" checked="checked">
        <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" value="new" name="studOldNew" class="custom-control-input custom-radio-button">
        <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
      </div>
    </div>
    <div class="col-md-2"></div>
  </div>
</div>
<div class="form-group" id="newStud" style="opacity: 0;visibility:hidden;">
  <div class="form-row">
    <div class="col-md-6">
      <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
    </div>
    <div class="col-md-6">
      <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
    </div>
  </div>
</div>

CSS

#newStud {
  transition: opacity 1s;
}

JavaScript

/* -- USING JQUERY -- */

/* $('input[type=radio][name=studOldNew]').on('change', function() {
	console.log('change:: ', $(this).val())
  switch ($(this).val()) {
    case 'old':
      $('#newStud').fadeOut();
      break;
    case 'new':
      $('#newStud').fadeIn();
      break;
  }
}); */

/* -- USING VANILA JS*/
var radios = document.querySelectorAll("input[type=radio][name=studOldNew]");
radios.forEach(r => {
	r.addEventListener("change", function(e) {
	  var target = e.target;
    switch (target.value) {
      case 'old':
        document.getElementById('newStud').style.opacity = 0;
                document.getElementById('newStud').style.visibility = 'hidden';
        break;
      case 'new':
        document.getElementById('newStud').style.visibility = 'visible';
        document.getElementById('newStud').style.opacity = 1;
        break;
    }
  });
})