Reply To: Conditional logic to hide a field if image is uploaded

• John Huebner

• March 18, 2016 at 9:15 pm

It should be possible, but I can’t tell you exactly what needs to be done. I might be able to point you in the right direction.

This is a bit of some code that I’m currently working on. It’s complicated, but I would not be able to do this with an image field without actually setting up the fields you have and doing a lot coding and testing.

On my field group I have a select field that lets the user chose a “Taxonomy” (not a term, but a taxonomy like “category” or “post_tag”) from the site. The field key of the select field is field_56e1cf2e7ad26. When this field is changed some code is run to see what is chosen and it runs makes an AJAX request to see if the taxonomy is hierarchical or not. If it is hierarchical then a checkbox field is displayed, the checkbox has a field key of field_56e2535c5a185. This lets the user decide if they want the terms in the field displayed in a hierarchical format or not.

Anyway, it won’t give you exactly what you need but you can see how to test for a change and then show or hide another field. What you’ll need to do is some testing to figure out how to tell if an image is chosen in a your image field or not.

Hopefully this helps and does not just confuse you

  jQuery(document).ready(function($){
    if (typeof acf == 'undefined') { return; }
  
    var bluntParasrch = acf.ajax.extend({
      events: {
        // all of these ids will need to change 
        // when I put field goups is code
        'blur #acf-field_56e069e986d6f': '_para_title_change',
        'change #acf-field_56e069e986d6f': '_para_title_change',
        'blur #acf-field_56e0380c33194': '_para_label_change',
        'change #acf-field_56e0380c33194': '_para_label_change',
        'ready #acf-field_56e0524ac7e33': '_para_key_load',
        'change #acf-field_56e1cf2e7ad26': '_para_tax_change',
        'ready #acf-field_56e1cf2e7ad26': '_para_tax_change',
      },
      
      _para_title_change: function(e){
        var $title = e.$el.val();
        var $label = $('#acf-field_56e0380c33194');
        if (!$label.val()) {
          $label.val($title);
        }
        $('#acf-field_56e0380c33194').trigger('blur');
      },
      
      _para_label_change: function(e){
        var $label = e.$el.val();
        var $name = $('#acf-field_56e0429a1c16f');
        if (!$name.val()) {
          var $gen_name = $label.trim();
          $gen_name = $gen_name.replace(/[^a-z0-9]+/gi, '_');
          $gen_name = $gen_name.toLowerCase();
          $name.val($gen_name);
        }
      },
      
      _para_key_load: function(e){
        if (!e.$el.val()) {
          e.$el.val('field_'+acf.get_uniqid());
        }
      },
      
      _para_tax_change: function(e){
      
        // bail early if no ajax
        if( !acf.get('ajax') ) return;
        // abort XHR if is already loading AJAX data
        if( this.request1 ) {
          this.request1.abort();
        }
        // vars
        var self = this,
            data = this.o;
        // add action url
        data.action = 'blunt_parasrch/tax_herachical_test';
        data.value = e.$el.val();
        // add ignore
        data.exists = [];
        // ajax
        //alert(acf.prepare_for_ajax( data ));
        this.request1 = $.ajax({
          url:    acf.get('ajaxurl'),
          data:    acf.prepare_for_ajax(data),
          type:    'post',
          dataType:  'json',
          success: function( json ){
            //alert(json);
            if (json) {
              // field_56e2535c5a185
              $('.acf-field-56e2535c5a185').css('display', 'block');
              $inputs = $('.acf-field-56e2535c5a185').css('display', 'block').find('input');
              $inputs[1].checked = true;
            } else {
              $inputs = $('.acf-field-56e2535c5a185').css('display', 'block').find('input');
              $inputs[1].checked = false;
              //alert('pause');
              $('.acf-field-56e2535c5a185').css('display', 'none');
            }
          }
        }); // end ajax
        
        if( this.request2 ) {
          this.request2.abort();
        }
        data.action = 'blunt_parasrch/taxonomy_terms';
        data.exists = [];
        this.request2 = $.ajax({
          url:    acf.get('ajaxurl'),
          data:    acf.prepare_for_ajax(data),
          type:    'post',
          dataType:  'json',
          success: function( json ){
            var $select = $('.acf-field-56e2b71dde0c5 select');
            var $selected = $select.val();
            $select.empty();
            $select.append('<option data-i="" selected="selected" value="">- Select -</option>');
            var count = json.length;
            for (i=0; i<count; i++) {
              //alert(json[i]['value']+':'+json[i]['label']);
              //var $option = $select.createElement('option');
              //$option.value = json[i]['value'];
              //$option.text = json[i]['label'];
              var $item = '<option value="'+json[i]['value']+'"'
              if ($selected == json[i]['value']) {
                $item += ' selected="selected"';
              }
              $item += '>'+json[i]['label']+'</option>';
              $select.append($item);
            }
          }
        }); // end ajax
        
        
      },
      
      
    });
    
    $('#acf-field_56e0524ac7e33').trigger('ready');
    $('#acf-field_56e1cf2e7ad26').trigger('ready');
    
  });