insert values into fields programmatically

• marathra

• January 24, 2017 at 4:57 am

I have a form with some 20 fields which is split over 4 tabs.

When someone puts in an email and then clicks out of that field it triggers this function:

function my_acf_script_focusout() {
	?>
    <script type=""text/javascript">
    (function($){
        $(document).ready(function(){
            $('.acf-field input[type="email"]').focusout(function(){
                // opens another window with target _blank 
            })
        });
    })(jQuery);
    </script>
    <?php
}
add_action('acf/input/admin_footer', 'my_acf_script_focusout');

This works fine, no problem.

But I’d like to do something more. In the same function I need to:

1) add a check to see which field is losing focus
2) if the field is called “main_info” (a WYSIWYG field) then I’d like to grab the contents of that field, manipulate them, and then insert INTO OTHER FIELDS ON OTHER TABS various values.

Right now I am having trouble

a) identifying which field has lost focus (without resorting to Javascript if possible)

b) grabbing the contents of that field

c) inserting values into other fields on the form (on other tabs)

Can anyone help with any of these?

Many thanks in advance!

• John Huebner

• January 30, 2017 at 4:40 am

You can target specific fields by using something like this

$('.acf-field[data-key="field_0123456"] input[type="email"]')

field_0123456 represents your field key.

As far as getting the value from the field, every field is going to be a little different. For example, a WYSIWYG field is a standard WP tinyMCE field and you’re going to need to look into how to get the value from that field. Other ACF fields will need to be look at on a one by one basis, but you can target specific fields with actions and to get values using the same basic method that I gave above by using the field keys. Updating other fields in the form is going to be the same as getting values from fields, each one is going to require different code depending on what type of field it is.

I have some examples of getting values from some types of fields and updating values is some types of fields, but I don’t have them all figured out. You can see my examples here https://github.com/Hube2/acf-dynamic-ajax-select-example.

• marathra

• February 1, 2017 at 4:00 am

Unfortunately that doesn’t work with tinymce because, I believe, it’s in an iFrame.

• John Huebner

• February 1, 2017 at 7:38 am

For tinyMCE you need to know the ID of the editor and then you need to call a tinyMCE function to get the content. I’m not completely familiar with everything tinyMCE, but I recently needed to figure out how to get the selected content in a specific field since there are many of them when using ACF.

This is some of the code I used, but you’ll need to do some digging to figure out how to get all of the content, I was focusing on getting what is selected.

// the editor ID is set by ACF, so you can get this from one of the
// acf field wrappers
var $my_editor = 'your-editor-it-here';

if (typeof tinyMCE !== 'undefined') {
  var $editor = false;
  for (i=0; i<tinyMCE.editors.length; i++) {
    if ($my_editor == tinyMCE.editors[i].id) {
      $editor = tinyMCE.editors[i];
    }
  }
  if (!$editor || $editor.hidden) {
    // get content from text area
    var $textarea = document.getElementById($my_editor);
    var $start = $textarea.selectionStart;
    var $end = $textarea.selectionEnd;
    mce_selection = $textarea.value.substring($start, $end);
  } else {
    mce_selection = $editor.selection.getContent();
  }
}

When I say I don’t know much about tinyMCE, it took me about 4 hours to figure out those 15 or 20 lines of code.

What you need help with here is how to the reverse, insert content into an editor, and that I can’t really help you with. I was working on making changes to a plugin that already does that part and I was fixing a bug in it that is caused by the existence of multiple editors when using ACF.

• marathra

• February 2, 2017 at 6:46 am

I finally managed it after a long time of searching. And it’s pretty simple.

I can grab the contents of the WYSIWYG field like this:

tinyMCE.activeEditor.getContent( content );

And set them like this:

tinyMCE.activeEditor.setContent( content );

I haven’t managed to get the wysiwyg field to trigger and event but I can work around that.

Also I don’t know how this would work if there were more than 1 wysiwyg field in the form.

• John Huebner

• February 2, 2017 at 7:20 am

I ran into a problem with tinyMCE.activeEditor. Have you tried this with multiple wysiwyg fields on the page? The problem I had is that I was always getting the selected content in the first active editor. For example if you set the first on to text it would always get the content from the second on. If the first on was active then it would always pull the content from there. That’s why in my code above I loop through all the editors and make sure I have the right one by checking the ID.

If all you have is the one editor then you probably won’t run into the problem.

I’m actually trying to figure out how to get a change in the editor to trigger an action now and I’m not having much luck either. More than likely I’m going to need to figure out how to add the action to the editor since the textarea field never seems to get updated until you submit the post.

• John Huebner

• February 2, 2017 at 10:05 am

Adding actions to tinyMCE editors.

I kept digging and I figured out how to add actions to the editors. This needs to be done only after the editor is added with the new “delay initialization” feature of wysiwyg fields.

jQuery(document).ready(function($){
  
  tinyMCE.on('addEditor', function(e) {
    // fires every time an editor is initialized
    if (typeof(e.editor) == 'undefined' || !e.editor.id.match(/^acf-editor-/)) {
      // not an acf wysiwyg field
      return
    }
    console.log(e.editor); // the editor
    console.log(e.editor.id); // the editor id
    e.editor.on('input', function(ed) {
      // fires on any input to this editor
      // could also use change, blur, focus, etc...
      // you'd want to check the editor ID to match it
      // to only the one you want to add this action to
      console.log('input');
    });
  }); // end tinyMCE.on
  
}); // end jQuery(document).ready

• marathra

• February 5, 2017 at 4:02 am

That’s useful, John. Right now I’ve only got the one editor with no actions (I managed to use actions on other elements instead) so it wasn’t too much of an issue once I’d managed to get/set the contents.

Cheers.

• marathra

• August 14, 2017 at 11:18 pm

Got to come back to this thread and say, thanks, John!

This pushed my coding skills right to the edge but I got the tinymce to fire on blur which has saved me a LOT of hassle with your code to add an action to the editor.

Thanks again!