Prevent "disabled" on hidden conditional fields

• kender

• January 28, 2023 at 3:34 pm

I have some fields I would like to hide, only because the form is long, and I would like to toggle visibility

If I use the “Conditional Logic”, the field becomes disabled when hidden, and therefore the values are not submitted and stored

I want to be able to toggle the visibility with the conditional logic without disabling the field so that the data is stored

• John Huebner

• January 29, 2023 at 10:02 am

Similar questions have come up in the past. There isn’t any way that I know of in ACF to do what you are looking for.

I think I remember one poster that hooked into the ACF javascript somehow when the submit button was clicked and toggled the conditional logic fields to show the fields before the form was submitted, but I cannot locate that topic.

Short of this you would need to basically create your own conditional logic. For example use some type of choice field and then add your own custom JavaScript to detect when this field is toggled/changed and then hide the fields in question using CSS. You could probably target fields to show/hide for a specific choice field by adding custom CSS classes to the ACF field wrapper for the fields that you want to show/hide.

• kender

• January 29, 2023 at 12:02 pm

@hube2

Thanks for the input, I was hopeful that there would be a solution baked into the package. I guess I will use my own “hide/show” methodology

Hopefully they will see a need for this and build it into a future build

• kender

• January 29, 2023 at 12:53 pm

@hube2

I wanted to show you my solution, and make it available for others in case they need it

(function($){
  // run when ACF is ready
  acf.add_action('ready', function(){
    // show/hide default banner on toggle
    $('.stored-default-group-trigger .acf-switch-input').on('change', function() {
      setTimeout(() => {
        if( $(this).siblings('.acf-switch').hasClass('-on')  ) {
          $(this).closest('.inside').find('.stored-default-group').removeClass('d-none');
        } else {
          $(this).closest('.inside').find('.stored-default-group').addClass('d-none');
        }
      }, 250);
    });
  });
})(jQuery);

For those who need it, an explanation of it in use

I have my fields hidden by default, so I identify them with 2 classes
– stored-default-group d-none

I have my toggle identified by a single class
– stored-default-group-trigger

When the toggle (true/false Boolean) is clicked, it changes the input inside that elements value between 0/1/1 (only stays on 1, but continues triggering the “change”), so I look at the ‘change’ trigger on that input

When it changes, I check the sibling element of this which shows the toggle is on or off (as the input stays 1, this is the best test I can use). It takes a short while to get the -on class, so I throw in a short wait before looking for it

if it is on (for me, the “show hidden” value), I will remove the “d-none” class from the “stored-default-group” items, if it is off I add it back

I don’t need to add in a check on the “add more items” button (its a repeater) to show the hidden fields, which is awesome, as they follow the initial fields class and are shown/hidden properly when new row is added

—

Side note… if anyone wants to clean this up and make it more efficient, I wouldn’t object