CODEWITHSUNDEEP
wordpressdrop-down-menuhtml-selectadvanced-custom-fields
JudeAinsly
JudeAinsly

Reputation: 83

How to get a dynamic dropdown with an ACF Relationship field

My website lists courses and course providers. I'm using ACF relationship to assign the providers to each course. both courses and course providers are custom post types I have a contact form for each single course page and I need to send the enquiry to the selected course provider from a dropdown. What I'm trying to do is to have a dynamic field where, once a provider has been selected, fetch their email (assigned as a acf field) into another form field and submit the form to that specific email. I'm getting both the list of assigned providers and their emails in following code.

               <select name="supplier" id="supplier" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_title(); ?>"><?php the_title(); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

                <select name="supplier_email" id="supplier_email" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_field('email_address'); ?>"><?php the_field('email_address'); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

I hope this can be done with jQuery.

Thanks!

Upvotes: 0

Views: 2238

Answers (1)

Rich
Rich

Reputation: 926

To make things easier you could add the email address as a data attribute to the tag for each provider title like so:

<select name="supplier" id="supplier" class="form-control">
                    <option value="">---</option>
                    <?php
                    $posts = get_field('course_providers');
                    if( $posts ): ?>
                        <?php foreach( $posts as $post): ?>
                            <?php setup_postdata($post); ?>
                            <option value="<?php the_title(); ?>" data-email="<?php the_field('email_address'); ?>"><?php the_title(); ?></option>
                        <?php endforeach; ?>
                        <?php wp_reset_postdata(); ?>
                    <?php endif; ?>
                </select>

Then in your jQuery you can do something like:

$(document).ready(function() {
    $('select#supplier').change(function() {
        var emailAddress = $('select#supplier').find(':selected').data('email');
    });
    // Do something with the var emailAddress on form submit here
});

Upvotes: 0

Related Questions