Run jQuery function on Page Load and Radio Input Click

Question

feeling a bit silly I cant seem to get this working 100%...

Following code works fine when selecting a radio button but I need it to run on page load as well - can't seem to figure out how to get this to play ball. The (many) post on here don't seem to offer the solution - I'm fairly confident I'm missing something very simple!! (as you may have guessed JS is not my forte!!)

$('#cvl_mb_services .content-switch').on('click', 'input[type="radio"]', function(){

    var parent      = $(this).parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = $(this).closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .' + inputValue + '-fields';
  
    $(targetBox).removeClass('hide-field');
  
    // console.log(parent + ' ' + inputValue + ' ' + targetBox);

});

Html mark up is as follows. (Things to note: There can be several .box containers and I don't have much direct control of the html since it's outputted by a plugin)

<div id="cvl_mb_services">
  <div id="box_01" class="box">
    <div class="content-switch">
      <ul>
        <li><input type="radio" class="content-option" value="header" checked="checked"><label>Header</label></li>
        <li><input type="radio" class="content-option" value="content"><label>Content</label></li>
        <li><input type="radio" class="content-option" value="footer"><label>Footer</label></li>
      </ul>
    </div>
    <div class="fields header-fields hide-field">
      <p>You should only see this content of the Header Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields content-fields hide-field">
      <p>You should only see this content of the Content Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields footer-fields hide-field">
      <p>You should only see this content of the Footer Option is selected (or pre-selected) in this box</p>
    </div>
  </div><!-- #box_01 -->
  <div id="box_02" class="box">
    <div class="content-switch">
      <ul>
        <li><input type="radio" class="content-option" value="header"><label>Header</label></li>
        <li><input type="radio" class="content-option" value="content" checked="checked"><label>Content</label></li>
        <li><input type="radio" class="content-option" value="footer"><label>Footer</label></li>
      </ul>
    </div>
    <div class="fields header-fields hide-field">
      <p>You should only see this content of the Header Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields content-fields hide-field">
      <p>You should only see this content of the Content Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields footer-fields hide-field">
      <p>You should only see this content of the Footer Option is selected (or pre-selected) in this box</p>
    </div>
  </div><!-- #box_02 -->
</div>

Thanks in advance

score 1 · Answer 1 · answered Jul 22 '20 at 11:47

I would put the callback code inside a function and call it when the document ready event is fired and then call it the callback function of the radio button click event listener.

function handleServicesRadioButton(elem) {
    var parent      = elem.parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = elem.closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .' + inputValue + '-fields';
    $(targetBox).removeClass('hide-field');
}

$(document).ready(function() {
    var radioButtonElem = $(".box .content-option").eq(0); //here I am selecting the first radio button for example
    handleServicesRadioButton(radioButtonElem); //called on page load
    servicesElem.on('click', 'input[type="radio"]', function(){
        var elem = $(this);
        handleServicesRadioButton(elem); //called on radio button click
    });
});

Thank you @Shikartoos - I'm getting a servicesElem is not defined error on this snippet I'm afraid. — richerimage, Jul 22 '20 at 12:24
Yeah you can change it with $('#cvl_mb_services .content-switch') — Shikartoos, Jul 22 '20 at 22:29

score 0 · Accepted Answer · answered Jul 22 '20 at 13:17

Working now with the following....

$( "#cvl_mb_services .content-switch" ).each(function(index, el) {
    var parent        = $(el).parent().parent().attr("id");
    var inputValue    = $('#' + parent + ' input[type=radio]:checked').val();
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    $(targetBox).removeClass('cvl-hide');
});


$('#cvl_mb_services .content-switch').on('click', 'input[type="radio"]', function(){

    var parent      = $(this).parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = $(this).closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    if (inputValue == 'content') {
        $('#' + parent + ' .cvl-content-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'header') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'footer') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').removeClass('cvl-hide');
    }

});

I am now looking to make this DRY / more efficient and have posted here...

Suggestions to make this jQuery function more DRY / more efficient

Run jQuery function on Page Load and Radio Input Click

2 Answers2

Linked