Home Forums General Issues JS event listener for sub fields


JS event listener for sub fields

  • Hi there,
    I have a group of fields, one of the sub-fields is a Select which is populated from an API. I then have 4 other sub-fields that I want to populate based on the value in the Select, this will be via an admin-ajax call. I should be able to do this using the JavaScript API but I am struggling to get acf.getField to use the sub-field. The documention doesn’t talk about sub-fields at all so I am wondering if I am missing something here? Any pointers? Clues?

    This is what I have:

    (function($) {
    	// make sure acf is loaded, it should be, but just in case
    	if (typeof acf == 'undefined') { 
    	var acf_field = acf.getField('field_64d20c8aa2224');
    	acf_field.on("change ready", function(e){
    		// bail early if no ajax
            if( !acf.get('ajax') ) return;
            // abort XHR if it's already running
            if( this.request ) {
    		 // set the ajax action that's set up in php
            var data  =  { 
                action: 'newbury_admin_get_raceday_details',
                racedayId: acf_field.val(), //The key_name needs to be the name of the parameter in your action
    		this.request = $.ajax({
              url:    acf.get('ajaxurl'),  // ajax url, acf already sets this
              data:    acf.prepareForAjax(data), // another included acf function
              type:    'post', // posted values, look at $_POST in your php ajax action function
              dataType:  'json', // how we want the date returned
              success: function( json ){
                console.log( json );
            }); // end ajax
  • I have played with the ACF JS API and I’ve never been able to get it to work with sub fields when I need to detect a field changing or update sibling fields.

    Instead I have always had to add a change action by targeting the field using jquery and using doing it on my own

    // example event on change of sub field
    // this needs to be on on the document level because rows and be added
    // field_XXXXXX == sub field key to create action for
    $(document).on('change', '[data-key="field_XXXXXX"] .acf-input select', function(e) {
      // get the target of the change
      target = $(;
      // get the row of the repeater
      row = target.closest('.acf-row');
      // get another field in the row
      other_field = row.find('[data-key="field_YYYYY"] input');
      // update value
      other_field.val('new value');
      // trigger change so that ACF knows it has been changed
  • Hi @hube2,
    That is very close to what I ended up using. The main difference is I didn’t have to target the row as it’s a group not a repeater. I also didn’t use the trigger for field that was changed, but I will add that.

    This is what I used:

    $(document).on('change', '[data-key="field_64d372692bcc4"] .acf-input select', function() {
    	var field = acf.getField('field_64d372692bcc4');
    	var racedayId = field.val();
            var data  =  { 
                action: 'newbury_admin_get_raceday_details',
                racedayId: racedayId,
              url:    acf.get('ajaxurl'), 
              data:    acf.prepareForAjax(data), 
              type:    'post',
              dataType:  'json',
              success: function( json ){
    		var result = json;
    		if(result[0].date) {
    			var date = result[0].date, dateSplit = date.split('-');
    			$('[data-key="field_64d224149988e"] .acf-input input[type=hidden]').val(dateSplit[2]+dateSplit[1]+dateSplit[0]);
    			$('[data-key="field_64d224149988e"] .acf-input input[type=text]').val(dateSplit[0]+'/'+dateSplit[1]+'/'+dateSplit[2]);
    			$('[data-key="field_64d2245f9988f"] .acf-input input[type=text]').val(result[0].Racetype);
    			$('[data-key="field_64d2249899890"] .acf-input input[type=url]').val(result[0].url);
    			$('[data-key="field_64d224b499891"] .acf-input input[type=text]').val(result[0].name);
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.