Dynamically Populate a Select Field from Front End or Without Options Page

• awc

• June 30, 2015 at 2:04 am

I have a CPT that uses a Select Field within a repeater to individually select people in a group. The people are often used in multiple groups. I currently have the Select Field dynamically populated through an Options Page in the back end. In addition to admins adding new posts to the CPT, the CPT will also take user submitted posts from a front end form. If a person is not listed in the Select Field, how would I have users add names to the database of people and have the Select Field dynamically populated?

Additionally (and if I need to open a new topic for this, let me know), how would I dynamically populate the Select Field in the admin area without having to visit the Options Page? Again, if a name doesn’t exist, be able to add it directly from the post editor. I didn’t come across an answer for that, but perhaps I missed something.

• James

• June 30, 2015 at 5:57 am

Hi @awc

Hmmm… You can accomplish this using JavaScript. For both cases, first, you need to grab the select field from the DOM then use JS to append the new options. The code should be somethiing like this:

mySelect = document.getElementById('mySelect-id');
 mySelect.options[mySelect.options.length] = new Option('label', 'new-value');

• Elliot

• July 10, 2015 at 12:48 pm

Hi @awc

This is a tricky one which ACF is not yet setup to do.

What you are asking for, if I have read correctly, is the ability to create a select field which you can also save new choices to.

This is currently possible via the radio field, but not yet for the select field.
It may be possible to customize the select2 JS args and allow a custom value to be saved, however, you will then need to append this value to the options page (I’m assuming you have a textarea field with all user choices)?

Checkout the JS customization here:
http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

And the update_value filter here:
http://www.advancedcustomfields.com/resources/filters/acfupdate_value/

• awc

• July 10, 2015 at 1:37 pm

I don’t have a textarea field with all choices… and upon further reviewing it looks like I should have. That’ll be easy That should be easy enough for me to change though. How I originally had it (because of project scope at the time) was to have a name and instrument associated together. But how I have it now is names by themselves in a repeating text field in an options page.

So your saying that if I have a textarea field, the select options can be dynamically populated by each line within the textarea? (Just making sure that what I just re-read is correct)? Sometimes I’m confused by the docs – which is often me not knowing enough.

Perhaps this can be a feature request for a future version? I’m sure you’re totally not busy with anything else and can drop everything for that 🙂

• Elliot

• July 15, 2015 at 10:41 am

Hi @awc

Yes, you can use a textarea field on an options page as a place to save a list of choices.

You can then load this value and use it as another select field’s choices. This is covered in a tutorial here:
http://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/

Thanks
E

• awc

• July 15, 2015 at 12:21 pm

Ack, I’m an idiot and confused two things, and maybe didn’t explain clearly enough. My apologies for wasting a bit of your time.

I do have a text field on the option page already, and it already dynamically populates the CPT select field.
One of the parameters of this project is to be able to dynamically populate from the CPT edit page, without needing to go to the options page. Either via a textarea field on the post editor page, or just adding a new option into the select box itself. As you mentioned this might pose a challenge, unless you’ve thought of something else!

Thanks

• Elliot

• July 16, 2015 at 9:32 am

Hi @awc

This is exactly what I have advised previously:

It may be possible to customize the select2 JS args and allow a custom value to be saved, however, you will then need to append this value to the options page (I’m assuming you have a textarea field with all user choices)?

Checkout the JS customization here:
http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

You could use the filter acf/update_value to get the select field’s value, and if this value does not exist within the options page textarea, you could add it using the update_field() function.

This will take quite a lot of customization, trial and error, debugging. I don’t have a working example of this, but almost anything is possible with code

• aaronpie

• March 17, 2017 at 3:45 am

@awc Did you ever get this working. I am not sure if what I am trying to accomplish is similar to what you are trying to do in your project.

I have an Option Page with a text area that lists all of our contractors. I would like our users to be able to add a contractor in the select field that is not listed so they do not have to go back and forth between the CPT edit page and Option Page.

• awc

• March 24, 2017 at 1:56 am

@aaronpie I did resolve this, but it was long ago and the project is now defunct. If I come across any code for this I’ll let you know.

• aaronpie

• March 24, 2017 at 2:33 am

@awc No, I have not got this working yet. Thank you for offering the code if you come across it.