Support

Account

Home Forums ACF PRO Multiple Dynamic Select fields using Ajax and API call

Helping

Multiple Dynamic Select fields using Ajax and API call

  • Hi all,

    I want to know if the below scenario can be achieved.

    I have 2 select fields, that gets the dropdown dynamically. This is inside a repeater field block.

    1. First select field makes an api call and gets response and fills the dropdown. I will select an option in the dropdown.
    2. Based on the option selected in the First dropdown, I will make an api call by passing the selected dropdown value and get the response. This response will fill the dropdown.
    3. The second dropdown is a repeatable field too. I need to limit the repeated field to the number of keys present in the json response of the second dropdown. eg: If second dropdown has 4 options, I can repeat this field 4 times.

    Eg: 1. When options page loads, I make an api call and fill in the first dropdown. Say Apple, Samsung, Windows, Xiaomi (This remains same even when I repeat the section).
    2. Say I select Apple, I make api call by passing ‘apple’ as a parameter and I get back 5 phones. 5, 5c, 5s, 6, 6s
    3. Now this 2nd dropdown where I select iPhones will be repeatable 5 times as I got back 5 keys.

    Is there a way I can achieve this. Please guid me though some examples and what ACF fields to use and how to proceed with ajax calls when selecting etc., would be helpful.

  • Not sure if this will help you or not. I have an example here that creates repeater rows based on the response from a ajax request https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/dynamic-repeater-on-category. There are also several other examples in the same repo that do ajax requests to dynamically populate other fields. I don’t have any examples the exactly fit what you’re looking for but I think that many of the things you’re looking for are represented.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.