Home Forums Front-end Issues Dynamically change acf_form checkbox field Reply To: Dynamically change acf_form checkbox field

  • If you’re looking to dynamically load a field based on another field then I would stick with a basic field type, like a select box, it can be done with radio and checkbox fields, and more than likely something like a taxonomy field, but a taxonomy field is already making AJAX requests and tying into those will be more complicated.

    Here are the basics for setting up a function that will fire when a field changes and make an AJAX request. You would create JavaScript file and enqueue it in the admin. When you enqueue the script set it’s $deps argument to array('acf-input'); which will ensure that that ACF’s acf-input.js file is loaded first.

    The following is for a select field that will trigger the event and change the values of another select field. You’ll need to do some testing to do other things but this is more information than I think is currently available and I think it will give people a place to start. You may also want to localize the script with the action that needs to be called. For more information on ajax and localizing scripts:

    Some of this, I’m not 100% sure of what it does, I’ve commented that below. Some of this was copied from other sources. I hate using stuff without completely understanding it, but, I’ll figure it out eventually. Most of what I’ve been able to learn is by trial and error, as the OP said, there isn’t a lot of information currently available for this type of thing and I’m hoping that others can help me change that. Hope this helps.

      if (typeof(acf) == 'undefined') {
        // acf does not exist
      // create events
      events: {
        // add a change event to the select field with
        // the id acf-field_56f181bf6f8d0
        // that calls the function _my_select_change_function
        'change #acf-field_56f181bf6f8d0': '_my_select_change_function',
        // add another event for the ready event
        // more about this later
        'ready #acf-field_56f181bf6f8d0': '_my_select_change_function',
      }, // end of events
      // the function
      _my_select_change_function: function(e) {
        // if we're already doing a request abort it
        if (this.request) {
          // another ajax request
        // not exactly sure what the next 2 lines do
        var self = this,
            data = this.o;
        // your ajax action
        data.action = 'my_ajax_action';
        // the value of the this field to send in the ajax request
        data.value = e.$el.val();
        // make the ajax request
        this.request = $.ajax({
          url: acf.get('ajaxurl'),
          data: acf.prepare_for_ajax(data),
          type: 'json',
          success: function(json) {
            // this function is called when
            // value is returned from ajax request
            // it returns an object or array
            // that looks like
              json = array(
                // nested array for each value label pair
                // to use when populating second select field
                  'value' => 'value of options',
                  'label' => 'label of option'
            // get the other select field we want to populate
            // can probably be done in other ways as well
            $select = $('div[data-key="field-57028ebad20f0"] select');
            // store what's already selected
            var $selected = [];
            // get current options and loop
            var $options = $('.acf-field-57028ebad20f0 option');
            for (i=0; i<options.length; i++) {
              if ($options[i].selected) {
                $selected[$selected.length] = $options[i].value;
            } // end for i
            // clear all current options from the select field
            // add null item
            $select.append('<option data-i="" selected="selected" value="">- Select -</option>');
            // loop returned value an populate
            for (i=0; i<json.length; i++) {
              var $item = '<option value="'+$json[i]['value']+'"'
    	  if ($selected.indexOf($taxonomy_terms[i]['value']) > -1) {
                // item was previously selected
                $item += ' selected="selected"';
              $item += '>'+$json[i]['label']+'</option>';
            } // end for i
          } // of success function
        }); // end of ajax request
      }, // end _my_select_change_function function
      // this will trigger when the page loads
      // what this will do is cause the select field we 
      // are dynamically populating to be loaded initially
      // using the ready action does not cause ACF to think
      // the field has been changed and means that the
      // "are you sure you want to leave this page"
      // message will not be displayed
    } // end of jquery ready function