Javascript unexpected show/hide behavior on page refresh

Question

I have a webpage with 3 radio buttons, Create, Update, and Suppress, and form with input fields and dropdown selectors. The form input fields and dropdown selectors visible to the user are dynamic based on which of the radio buttons is selected. My current code is demonstrating unexpected behavior when I refresh the page.

When I first browse to the page in debug, all 3 radio buttons' views are as expected, as far as the delete dropdown (deleteid) being hidden from view in all but the Suppress view. However, if I click refresh in the browser, it returns to the Create radio button (which is expected), but the delete dropdown suddenly appears on the Create page. Repeated refreshes demonstrate the same behavior, and the delete dropdown selector continues to appear on the Create page. Why is this happening?

Here is the code:

document.addEventListener('DOMContentLoaded', function() {

  $(document).ready(function() {
    $('.js-example-basic-single').select2();
  });

  // Hide show inputs
  $('input[type=radio][name=group]').change(function() {
    if (this.value == 'create') {
      $('#proid').hide();
      $('#deleteid').hide();
      $('.fields').show();
    } else if (this.value == 'update') {
      $('#proid').show();
      $('#deleteid').hide();
      $('#btnSearch').show();
      $('.fields').show();
    } else if (this.value == 'suppress') {
      $('#proid').show();
      $('#deleteid').show();
      $('#btnSearch').hide();
      $('.fields').hide();
    }
  });

});

EDIT 1: I should also highlight that if I switch to Update view, then switch back to Create view, the delete dropdown then is NOT on the Create view any longer. But as soon as I click Refresh, it comes back

mplungjan · Accepted Answer

Try this.

Remove document.addEventListener('DOMContentLoaded', function () { is is not needed at all when you have $(document).ready(function () { - move all functions inside that

const checkRads  = () => {
  const checked  = $('input[type=radio][name=group]:checked').val();  
  const create   = checked === 'create';
  const update   = checked === 'update';
  const suppress = checked === 'suppress';
  $('#proid').toggle(!create);
  $('#deleteid').toggle(suppress);
  $('.fields').toggle(!suppress);
  $('#btnSearch').toggle(update);
}; 
$(function() {
  $('.js-example-basic-single').select2();
  // Hide show inputs
  $('input[type=radio][name=group]').on('change',checkRads);
  checkRads();
});

Javascript unexpected show/hide behavior on page refresh

Answers (1)

Related Questions