Home Forums General Issues Conditional logic to hide a field if image is uploaded


Conditional logic to hide a field if image is uploaded

  • Hi everyone!

    I was wondering if it is possible to use a conditional logic for this setup:

    There are 2 fields – ‘picture'(Image type) and ‘persons_sex'(Select Type). If picture is not uploaded then user has to select their sex (Male/Female) to show a corresponding dummy thumbnail instead of picture on front-end.

    What I am hoping to achieve, is to hide ‘persons_sex’ field if image is uploaded.

    I found old article here:

    And was trying to build upon it.

    I noticed that there is an image with class=”acf-image-image” presented whether picture was uploaded or not. When no picture uploaded acf-image-image’s src attribute is empty, and when image is uploaded – it contains image link.

    So I was thinking to use MutationObserver to check when image src will change and then use jquery to hide ‘persons_sex’ field. The problem is, I am new to MutationObserver and takes me forever to figure it all up

    My question:

    Is this the best approach, or maybe there is a simpler approach? Maybe someone already faced such challenge and can share their solution?

    Thanks in advance!

  • 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

        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()) {
          _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();
          _para_key_load: function(e){
            if (!e.$el.val()) {
          _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 ) {
            // 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 ){
                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;
                  $('.acf-field-56e2535c5a185').css('display', 'none');
            }); // end ajax
            if( this.request2 ) {
            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.append('<option data-i="" selected="selected" value="">- Select -</option>');
                var count = json.length;
                for (i=0; i<count; i++) {
                  //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>';
            }); // end ajax
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Conditional logic to hide a field if image is uploaded’ is closed to new replies.