Hello,
Thanks for the feedback. This feature request is tough to weigh, because it’s hard to find a solution that fits everyone needs with an UI in ACF Extended. Most scenarios like yours, implying dependant fields, are really specific to the project.
Generally speaking when you’re working on a complex feature like that, I advise you to start by doing it in the backend, on a test post. Once it works as expected, you can migrate the code for the front-end form.
Here is a code example that should work in your case. In this example, there are 2 Post Object fields: post_object_1 & post_object_2. I’ll directly write JS code in an admin hook instead of enqueuing a JS file, following this documentation: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.
This JS code only works in the back-end right now. If you want to enqueue proper JS files in front-end or back-end, please refer to the ACF documentation.
Note: Please read carefully the comments in the code, as it took me some time to write it so you can understand what is going on.
Video example: https://i.imgur.com/srKnxmg.mp4
Post Object 1 data in the Post Object 2 Ajax Request: https://i.imgur.com/CQLwuQD.png
/*
* ACF Post Object JS
*/
add_action('acf/input/admin_footer', 'my_acf_post_object_js');
function my_acf_post_object_js(){
?>
<script type="text/javascript">
(function($){
// Bail early if there is no 'acf'
if(typeof acf === 'undefined')
return;
/*
* Post Object 1: JS Loading Hook
* Description: On load check for Post Object 2 and disable it if there is no value in Post Object 1
*/
acf.addAction('new_field/name=post_object_1', function(post_object_1){
// Search post_object_2 field
var post_object_2 = acf.getFields({
name: 'post_object_2',
limit: 1
});
// Bail early if post_object_2 field is not found
if(!post_object_2.length)
return;
// Reset array
post_object_2 = post_object_2.shift();
// Get post_object_2 input
var $post_object_2_input = post_object_2.$input();
// If there is no value in post_object_1: Disable + Remove any value from post_object_2
if(!post_object_1.val()){
// Disable
post_object_2.disable();
// Remove any value
$post_object_2_input.val(false);
$post_object_2_input.change();
}
/*
* Post Object 1: On Change
*/
post_object_1.on('change', function(){
// If there is no value in post_object_1 after a change: Disable + Remove any value from post_object_2
if(!post_object_1.val()){
// Disable
post_object_2.disable();
// Remove any value
$post_object_2_input.val(false);
$post_object_2_input.change();
// Stop
return;
}
post_object_2.enable();
});
});
/*
* Post Object 2: JS Ajax Data
* Description: Add a Post Object 1 value to the Post Object 2 Ajax Data
* Note: The hook 'select2_ajax_data/name=post_object_2' will only works with ACF Extended. Out of the box, ACF doesn't allow to target specific name on 'select2_ajax_data' JS hook
*/
acf.add_filter('select2_ajax_data/name=post_object_2', function(data, args, $input, field, instance){
// Search post_object_1 field
var post_object_1 = acf.getFields({
name: 'post_object_1',
limit: 1
});
// Bail early if post_object_1 field is not found
if(!post_object_1.length)
return data;
// Reset array
post_object_1 = post_object_1.shift();
// Set post_object_1 value in the ajax data
data.post_object_1 = post_object_1.val();
return data;
});
})(jQuery);
</script>
<?php
}
/*
* Post Object 2: PHP Ajax Query
* Description: Retrieve the Post Object 1 Value and do something with it
* Documentation: https://www.advancedcustomfields.com/resources/acf-fields-post_object-query/
*/
add_filter('acf/fields/post_object/query/name=post_object_2', 'my_acf_post_object_2_query', 10, 3);
function my_acf_post_object_2_query($args, $field, $post_id){
// Retrieve post_object_1 value
$post_object_1 = acf_maybe_get_POST('post_object_1');
if(!$post_object_1)
return $args;
// Do something with $args ...
return $args;
}
Hope it helps!
Regards.
