Home › Forums › General Issues › 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:
http://www.elliotcondon.com/conditional-logic-for-advanced-custom-fields/
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
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');
});
The topic ‘Conditional logic to hide a field if image is uploaded’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.