Home › Forums › Backend Issues (wp-admin) › Populate Text Fields on Select Field Change › Reply To: Populate Text Fields on Select Field Change
I thought I would share this. I have a client site that I’m currently working on that needs this functionality for both a set of fields as described in the other example and for a repeater field. In my case I’m loading data from the same types of fields. I have a post object field and when it changes I am loading a textarea field used for the excerpt and an image field. In one case I am also loading a text field from the post title. Because of this I am able to combine the PHP side of both AJAX requests into a single PHP function. Here is the code I am using.
// PHP
new client_name_mods();
class client_name_mods {
public function __construct() {
add_action('acf/input/admin_enqueue_scripts', array($this, 'acf_enqueue_script'));
add_action('wp_ajax_cm_load_relationship_content', array($this, 'get_related_content_data'));
} // end public function __construct
public function acf_enqueue_script() {
$post_id = 0;
global $post;
if ($post && isset($post->ID)) {
$post_id = $post->ID;
if (get_post_type($post_id) == 'acf-field-group') {
// do not load on field group edit page
return;
}
}
$handle = 'client-name-acf-extension';
$src = '/'.str_replace(ABSPATH, '', dirname(__FILE__)).'/js/client-name-acf-extension.js';
$depends = array('acf-input');
wp_register_script($handle, $src, $depends);
$object = 'client_name_acf_extension_object';
$data = array('post_id' => $post->ID);
wp_localize_script($handle, $object, $data);
wp_enqueue_script($handle);
} // end public function enqueue_script
public function get_related_content_data() {
if (!wp_verify_nonce($_POST['nonce'], 'acf_nonce')) {
echo json_encode(false);
exit;
}
$check_fields = array(
'post_id',
'related_post',
'image_size',
'field_key',
'image_field',
'title_field',
'excerpt_field'
);
foreach ($check_fields as $index) {
if (!isset($_POST[$index])) {
echo json_encode(false);
exit;
}
}
$title = '';
$excerpt = '';
$image_id = 0;
$post_id = intval($_POST['post_id']);
$related_post = intval($_POST['related_post']);
$image_size = $_POST['image_size'];
$field_key = $_POST['field_key'];
$post_object_field = $_POST['post_object_field'];
$image_field = $_POST['image_field'];
$title_field = $_POST['title_field'];
$excerpt_field = $_POST['excerpt_field'];
// get the current values
$field_object = acf_get_field($field_key);
if ($field_object['type'] == 'repeater') {
// look for a row that already has this relationhip
$repeater = $field['name'];
if ($title_field) {
$title_field = acf_get_field($title_field);
$title_field = $title_field['name'];
}
$post_object_field = acf_get_field($post_object_field);
$post_object_field = $post_object_field['name'];
$excerpt_field = acf_get_field($excerpt_field);
$excerpt_field = $excerpt_field['name'];
$image_field = acf_get_field($image_field);
$image_field = $image_field['name'];
if (have_rows($repeater, $post_id)) {
while (have_rows($repeater, $post_id)) {
the_row();
if (intval(get_sub_field($post_object_field), false) == $related_post) {
// same related post
if ($title_field) {
$title = get_sub_field($title_field, false);
}
$excerpt = get_sub_field($excerpt_field, false);
$image_id = intval(get_sub_field($image_field, false));
// found one, no reason to continue while
break;
} // end if already related
} // end while rows
} // end if rows
} else {
// not repeater
$current_value = get_field($post_object_field, $post_id, false);
if ($current_value == $related_post) {
if ($title_field) {
$title = get_field($title_field, $post_id, false);
}
$excerpt = get_field($excerpt_field, $post_id, false);
$image_id = get_field($image_field, $post_id, false);
}
}
if ($title == '' && $excerpt == '') {
// net set, get values from related post
$title = get_the_title($related_post);
$excerpt = get_field('excerpt', $related_post, false);
//echo json_encode(array('related_post' => $related_post)); exit;
//echo json_encode(array('get_post_thumbnail' => true)); exit;
$image_id = intval(get_post_thumbnail_id($related_post));
}
$image = false;
//echo json_encode(array('image_id' => $image_id)); exit;
if ($image_id) {
$image_details = wp_get_attachment_image_src($image_id, $image_size);
if ($image_details) {
$image = array(
'id' => $image_id,
'url' => $image_details[0]
);
}
}
$array = array(
'title' => $title,
'excerpt' => $excerpt,
'image' => $image
);
echo json_encode($array);
exit;
} // end public function get_related_content_data
} // end class client_name_mods
// JavaScript File
jQuery(document).ready(function($) {
if (typeof(acf) == 'undefined') {
return;
}
var clientNameACF = acf.ajax.extend({
events: {
'change [data-key="field_59d246273950f"] .acf-input select': 'featured_post_change',
'change [data-key="field_59d242a16ff63"] .acf-input select': 'related_post_change',
}, // end events
featured_post_change: function(e) {
var $related_post = e.$el.val();
var $post_id = client_name_acf_extension_object.post_id
var $field_key = 'field_59d246273950f';
var $post_object_field = 'field_59d246273950f';
var $image_field = 'field_59d2468639510';
var $title_field = 'field_59d246ae39511';
var $excerpt_field = 'field_59d246bc39512';
var $image_size = $('[data-key="'+$image_field+'"]').find('.acf-image-uploader').data('preview_size');
var $action = 'cm_load_relationship_content';
// clear current values
$('[data-key="'+$title_field+'"] input').val('');
$('[data-key="'+$excerpt_field+'"] textarea').val('');
$('[data-key="'+$image_field+'"] a[data-name="remove"]').trigger('click');
// if not related post is selected, return
if (!$related_post) {
return;
}
var self = this;
var data = this.o;
data.action = $action;
data.related_post = $related_post;
data.post_id = $post_id;
data.field_key = $field_key;
data.post_object_field = $post_object_field;
data.image_field = $image_field;
data.title_field = $title_field;
data.excerpt_field = $excerpt_field;
data.image_size = $image_size;
data.exists = [];
//console.log(data);
this.request = $.ajax({
url: acf.get('ajaxurl'),
data: acf.prepare_for_ajax(data),
type: 'post',
dataType: 'json',
success: function(json) {
console.log(json);
if (!json) {
return;
}
if (json['title']) {
$('[data-key="'+$title_field+'"] input').val(json['title']);
}
if (json['excerpt']) {
$('[data-key="'+$excerpt_field+'"] textarea').val(json['excerpt']);
}
if (json['image']) {
$('[data-key="'+$image_field+'"] input[type="hidden"]').val(json['image']['id']);
$('[data-key="'+$image_field+'"] img').attr('src', json['image']['url']);
$('[data-key="'+$image_field+'"]').find('.acf-image-uploader').addClass('has-value');
}
},
error: function(jqXHR, textStatus, error) {
console.log(jqXHR);
console.log(textStatus);
console.log(error);
}
}); // end request
}, // end featured_post_chang
related_post_change: function(e) {
var $related_post = e.$el.val();
var $post_id = client_name_acf_extension_object.post_id
var $field_key = 'field_59d2427e6ff62';
var $post_object_field = 'field_59d242a16ff63';
var $image_field = 'field_59d2446e6ff64';
var $title_field = '';
var $excerpt_field = 'field_59d244af6ff66';
var $action = 'cm_load_relationship_content';
var $row = e.$el.closest('.acf-row');
$row.find('[data-key="'+$title_field+'"] input').val('');
$row.find('[data-key="'+$excerpt_field+'"] textarea').val('');
$row.find('[data-key="'+$image_field+'"] a[data-name="remove"]').trigger('click');
$image_size = $row.find('[data-key="'+$image_field+'"]').find('.acf-image-uploader').data('preview_size');
// if not related post is selected, return
if (!$related_post) {
return;
}
var self = this;
var data = this.o;
data.action = $action;
data.related_post = $related_post;
data.post_id = $post_id;
data.field_key = $field_key;
data.post_object_field = $post_object_field;
data.image_field = $image_field;
data.title_field = $title_field;
data.excerpt_field = $excerpt_field;
data.image_size = $image_size;
data.exists = [];
//console.log(data);
this.request = $.ajax({
url: acf.get('ajaxurl'),
data: acf.prepare_for_ajax(data),
type: 'post',
dataType: 'json',
success: function(json) {
console.log(json);
if (!json) {
return;
}
/*
if (json['title']) {
$row.find('[data-key="'+$title_field+'"] input').val(json['title']);
}
*/
if (json['excerpt']) {
$row.find('[data-key="'+$excerpt_field+'"] textarea').val(json['excerpt']);
}
if (json['image']) {
$row.find('[data-key="'+$image_field+'"] input[type="hidden"]').val(json['image']['id']);
$row.find('[data-key="'+$image_field+'"] img').attr('src', json['image']['url']);
$row.find('[data-key="'+$image_field+'"]').find('.acf-image-uploader').addClass('has-value');
}
},
error: function(jqXHR, textStatus, error) {
console.log(jqXHR);
console.log(textStatus);
console.log(error);
}
}); // end request
}, // end related_post_change
});
});
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!