PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Dynamic Population of multiple select fields based on each previous select

  1. Hi there,

    I think I have a working methodology in place for my particular requirements but I just wanted to check whether I am potentially taking a very roundabout route to get there.

    The requirements

    I am building a 'product registration' form for a client. Customers must be able to arrive at the site and register one or more products purchased from the retailer.

    The first page of the form is standard user detail collection (which I am using to create posts in a custom post type). The second page of the form is the actual registration of product.

    A user can register between 1 and 5 products at a time, so the first field is a select box numbered 1 to 5. After that I have 5 'sections' each containing the same fields. The first section displays always, the following sections have all their elements set to conditionally show depending on the value of the first select field.

    Each allows a customer to drill down through a series of select elements to find their product. The first field is automatically populated with terms from the product taxonomy. All other select elements I am setting to disabled via a jQuery call on (document).ready.

    I that have a manually scripted jQuery function to do getJSON data when the customer changes the product taxonomy select. So if they select Range 1, the second select element dynamically populates with the Product Titles from that range (and is enabled). If they select a product title then the third select field dynamically populates with all product codes available for that product (handled via ACF repeating fields).

    This way the customer must select one box after the other and the selection of a previous box automatically updates the options available thereafter.

    The question!

    Does this sound like a reasonable way to approach this? Or am I missing some very funky functionality within Gravity Forms that could make my life easier and require less manual coding of javascript. Essentially Gravity Forms, at this particular point, is just creating the placeholders for me. But I couldn't see any obvious other way to handle the very specific JSON lookup.

    I'm going to have take some time over coding the javascript so I can just have a single function to look after each product registration but I think it's achievable.

    Anyway, I hope that all makes sense. I'm new to Gravity Forms so am just learning my way round its capabilities.


    Posted 9 years ago on Tuesday July 3, 2012 | Permalink
  2. David Peralty

    The way I would do it because I'm weak in JavaScript is through conditional logic. Conditional logic allows fields to be hidden until another field value is equal to something certain. So I could have tons of fields hidden, with values already pre-populated, and then show them depending on what number a user selects. But, if your way is working, and you are strong in your JS-fu, I say go ahead with what you are doing. :)

    Posted 9 years ago on Tuesday July 3, 2012 | Permalink
  3. Thanks for the super speedy response David!

    I think I see how your approach would work, although I think in this case with 15 product ranges, a few hundred products in each range, up to 20 codes in each product I think I might be better going JS.

    That's cool. Good to know I wasn't missing something very obvious :D

    I'll try to post up some working examples once I've got it all figured out in case its of use to someone else.


    Posted 9 years ago on Tuesday July 3, 2012 | Permalink
  4. David Peralty

    That's great. I really appreciate that. I totally understand why you are doing it that way, and many people just use Gravity Forms as a placeholder system when they are working with such a complex data requirement. :)

    Posted 9 years ago on Tuesday July 3, 2012 | Permalink