CODEWITHSUNDEEP
javascriptjquery
Ricardo
Ricardo

Reputation: 11

What's the max optimization / code reduction for a lot of repeated if/else statements?

I have several selects that hide or show elements depending on the option, the jquery process is the same for all, but with different ID's.

So far, I have two if/else conditions for each select, one to hide/show and the other to delete anything saved in one of the elements in case of being hidden.

This is how I hide or show:

  $('#registration_welcome_template_option').on('change', function () {
    if (this.value === 'default') {
      $('#registration_welcome_default').show();
      $('#registration_welcome_custom').hide();
    } else {
      $('#registration_welcome_default').hide();
      $('#registration_welcome_custom').show();
    }
  }).change();

And this is how I wipe the data of the hidden element:

$('#registration_welcome_template_option').closest('form').submit(function () {
  if ($('#registration_welcome_template_option').val() === 'default') {
    $('#organization_admin_type_pages_email_registration_welcome_data_subject').val('');
    $('#organization_admin_type_pages_email_registration_welcome_data_body').val('');
  }
});

Basically I have these two blocks repeated 6 times each and the only difference are the ID's. Since it's a massive waste of code and processing, I'm looking for the max optimization possible to reduce the code as much as possible.

Upvotes: 1

Views: 59

Answers (3)

mocni_T
mocni_T

Reputation: 179

So for the first if / else statement you can use toggle to hide or show element. 

var createFormChange = function(formName, _default, _custom){
    $(formName).on('change', function () {
        var isDefaultValue = this.value === 'default';
        // if this is true it will show defualt value and hide custom, and opposite.
        $(_default).show(isDefaultValue);
        $(_custom).hide(!isDefaultValue);
      }).change();
}

For clearing values you can use function that will reset values. It accepts form name all tags you want to clear value from.

var createFormSubmit = function(formName, dataToClear){
  $(formName).closest('form').submit(function () {
    if ($(formName).val() === 'default') {
    // clearing all values 
    dataToClear.forEach(element =>  element.val('') );
    }
  });
}

createFormSubmit("#registration_welcome_template_option", ['#organization_admin_type_pages_email_registration_welcome_data_subject', '#organization_admin_type_pages_email_registration_welcome_data_body']);
createFormChange("#registration_welcome_template_option", "#registration_welcome_default", "#registration_welcome_custom")

Upvotes: 0

Ram Segev
Ram Segev

Reputation: 2573

you can add class and loop through the elements

$('.registration_welcome_template_option').change(function(e){
    $('.className').each(function(){
        if (this.value === 'default') {
            $(this).toggle();
        }
    };
});
$('#registration_welcome_template_option').closest('form').submit(function () {
  if ($('#registration_welcome_template_option').val() === 'default') {
    $('.className').each(function(){
            $(this).val('');
        }
    };
  }
});

Upvotes: 1

Charlie
Charlie

Reputation: 23778

Write a generic function which takes the IDs as arguments. 

function showOnDefault(id1, id2) {

    id1 = '#' + id1;
    id2 = '#' + id2;

    if (this.value === 'default') {
      $(id1).show();
      $(id2).hide();
    } else {
      $(id1).hide();
      $(id2).show();
    }
}

Then bind it with the appropriate value and context in your event handler.

$('#registration_welcome_template_option').on('change', function() { 
     showOnDefault.bind(this, 'registration_welcome_default', 'registration_welcome_custom')
}).change();


$('#another_select').on('change', function() { 
     showOnDefault.bind(this, 'another_default', 'another_custom')
}).change();

Upvotes: 0

Related Questions