Selecting a default radio input on page load Javascript

Question

I have a page that when I change radio boxes it shows different content.

It works when I click radio boxes. But in an edit form, I would like the second radio option to be selected and content of second radio option to be shown on page load. The content is not shown when I populate 'checked' on the radio as shown in the demo.

Demo.

var aTag = document.querySelector("a.mylink");
aTag.addEventListener("click", function(e) {
  e.preventDefault();
  var query = document.querySelector("input[data-for='" + e.currentTarget.id + "']").value;
  window.open(e.currentTarget.href + "?query=" + query, "_blank");
}, false);

// radio element click event handler
var radioClickHandler = function() {
  var first = document.querySelector('.first');
  var second = document.querySelector('.second');

  second.classList.add('hidden');
  // show/hide required elements depending on which radio element was clicked.
  if (this.value == 'product') {
    first.classList.remove('hidden');
    second.classList.add('hidden');
  }
  if (this.value == 'keyword') {
    first.classList.add('hidden');
    second.classList.remove('hidden');
  }
}

// Get All Radio Elements
var radios = document.querySelectorAll('[type=radio]');

// Apply click event
for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener('click', radioClickHandler);
}
// Apply Default
radioClickHandler.apply(radios[0]);

.hidden {
  display: none;
}

<div class="col-md-8 offset-md-2">

  <div class="m-form__group form-group row">
    <div class="col-9">
      <div class="m-radio-inline mt-3 type_selector">
        <label class="m-radio">
              <input type="radio" name="type" value="product" data-id="specific_product"> First
              <span></span>
            </label>
        <label class="m-radio">
              <input type="radio" name="type" value="keyword" required="" data-id="search_term" checked> Second
              <span></span>
            </label>
      </div>
    </div>
  </div>
  <style>
    /*hides element*/
  </style>
  <div class="first">
    <label for="" class="mt-2 mb-2"><strong>First Content</strong></label>
    <select class="form-control m-select2 select2-hidden-accessible" id="m_select2_1" name="product_id" data-select2-id="m_select2_1" tabindex="-1" aria-hidden="true">
      <option value="" data-select2-id="" disabled selected>Blabla
      </option>
    </select>
  </div>
  <div class="second">
    <label for="exampleInputEmail1" class="pt-3"><strong>Second Content</strong></label>
    <div class="row mt-1 ">
      <div class="col-xl-8">
        <input type="text" class="form-control m-input m-input--solid" data-for="search_term" name="{{$default_template->notification_toggle_id}}_search_term" value="" id="m_autosize_1" placeholder="blabla">

      </div>
      <div class="col-xl-4 align-self-center">
        <a href="{{url('mesaj-sablonlari/urune-ozel/arama')}}" class="mylink " id="search_term">First Content</a>
        <script>
        </script>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  </script>
</div>

I tried several things like. But I couldn't succeed.

window.onload = radioClickHandler;

After

window.onload = function() {
  The whole javascript snippet
};

Also this

var radios = document.querySelectorAll('.type_selector .m-radio input[type=radio]');

Answer 1

Working fiddle.

You could simply invoke the click event using :

radios[1].click();

Edit:

The problem happens since you're attaching the click event to all the radio button in the current document in the following line :

var radios = document.querySelectorAll('[type=radio]');

To fix this issue you need to encapsulate the first & second radios so you could attach the click to them separately :

<div id="first-second" class="m-form__group form-group row"> 

Then attach the event just to them like :

var radios = document.querySelectorAll('#first-second [type=radio]');

Answer 2

EDIT: I think it is the addition of the other radio buttons are being added to the same group so second is not your second radio but 5th so this will now work

radioClickHandler.apply(radios[5]);

http://jsfiddle.net/wy9xbhdo/

Answer 3

The onchange or onclick event does not fire when the selected option of the select object is changed programmatically or you fill the input value programmatically. So you do require to trigger that onchange or onclick after changing it in window.onload or init function.

To trigger the event use How to trigger event in JavaScript?