Dynamically pre-populate multiple dropdowns with ACF values using jQuery

Get Help
, , ,
1

Hi,

I am using Gravity Forms for an application form that needs some custom functionalities which require PHP scripting, which is not one of my strong suits :slight_smile: Googling a lot and using forums and knowledge bases I already came quite far. But for the last part I need your help.

The form consist of multiple fields including two dropdown selectors;
the vacancy and the department.

Vacancy Dropdown
In the form the user has to select a vacancy, which is a dropdown with all published vacancies (a custom post type - CPT). I have created a script that prepopulates the list with the published vacancies.

// GRAVITY FORMS: APPLICATION FORM
// Populate application form with the current vacancies
// @link https://docs.gravityforms.com/dynamically-populating-drop-down-fields/
    add_filter( 'gform_pre_render_3', 'populate_posts' );
    add_filter( 'gform_pre_validation_3', 'populate_posts' );
    add_filter( 'gform_pre_submission_filter_3', 'populate_posts' );
    add_filter( 'gform_admin_pre_render_3', 'populate_posts' );
    function populate_posts( $form ) {
        foreach ( $form['fields'] as &$field ) {     
            if ( $field->type != 'select' || strpos( $field->cssClass, 'populate-posts' ) === false ) {
                continue;
            }    
            // you can add additional parameters here to alter the posts that are retrieved
            // @link http://codex.wordpress.org/Template_Tags/get_posts
            $posts = get_posts( 'post_type=vacancies&numberposts=-1' );  
            $choices = array();  
            foreach ( $posts as $post ) {                   $choices[] = array( 'text' => $post->post_title, 'value' => $post->post_title, 'orderby' => 'title', 'order' => 'ASC' );
            }    
            // update 'Select a Post' to whatever you'd like the instructive option to be
            $field->placeholder = 'Select a Vacancy...';
            $field->choices = $choices;  
        }    
        return $form;
    }

Department Dropdown
Those vacancies have multiple custom fields, using Advanced Custom Fields (ACF).
One of those fields is the department.

I have created a second dropdown with all the department options which can be selected from the ACF. I have created a second script that prepopulates the list with the available departments.

// GRAVITY FORMS: APPLICATION FORM
// Populate department to auto-assign team leaders in HubSpot
// @link https://docs.gravityforms.com/dynamically-populating-drop-down-fields/
// @link https://whiteleydesigns.com/auto-populate-gravity-forms-select-dropdown-with-values-from-advanced-custom-fields-acf/
add_filter( 'gform_pre_render_3', 'populate_dept' );
add_filter( 'gform_pre_validation_3', 'populate_dept' );
add_filter( 'gform_pre_submission_filter_3', 'populate_dept' );
add_filter( 'gform_admin_pre_render_3', 'populate_dept' );
function populate_dept( $form ) {
     foreach ( $form['fields'] as &$field ) {
          // Only populate field ID 23
          if( $field['id'] == 23 ) {
               $acf_field_key = "field_5efd9138e248e"; // ACF field key
               $acf_field = get_field_object($acf_field_key); // Object Field of selected field
               $choices = array(); // Set up blank array
               if( $acf_field ) {
                    // loop over each select item at add value/option to $choices array
                    foreach( $acf_field['choices'] as $k => $v ) {
                         $choices[] = array( 'text' => $v, 'value' => $k );
                    }
               }
               // Set placeholder text for dropdown
               $field->placeholder = 'Choose a Department...';
               // Set choices from array of ACF values
               $field->choices = $choices;
          }
     }
return $form;
}

Now I want to automatically select the department in the second dropdown, which relates the vacancy in the first dropdown. The input will be used for our CRM.

I hope you code wizards can help me out!

Thanks,

Jeroen

2

Hi Jeroen, I’m not aware of a way to do this in Gravity Forms out of the box; however, I have a plugin called Populate Anything that lets you, well, populate anything into your form fields.

In this case, you could set up both fields and configure via the settings which posts and custom fields should be populated into each. Furthmore, you can filter the second drop down such that only results that match the value selected in the first drop down will be populated. It’s pretty powerful stuff!

If you have any questions, let me know!

1 Like
3

Thanks David!

For the mean while I have found a way to include the departnamt within the vacancy name. By scanning for this text, our CRM can take further action depending on that name.

The script I used:

// GRAVITY FORMS: APPLICATION FORM
// Populate application form with the current vacancies, including the department names
// @link https://docs.gravityforms.com/dynamically-populating-drop-down-fields/
	add_filter( 'gform_pre_render_3', 'populate_posts' );
	add_filter( 'gform_pre_validation_3', 'populate_posts' );
	add_filter( 'gform_pre_submission_filter_3', 'populate_posts' );
	add_filter( 'gform_admin_pre_render_3', 'populate_posts' );
	function populate_posts( $form ) {
		foreach ( $form['fields'] as &$field ) {	 
			if ( $field->type != 'select' || strpos( $field->cssClass, 'populate-posts' ) === false ) {
				continue;
			}	 
			// you can add additional parameters here to alter the posts that are retrieved
			// @link http://codex.wordpress.org/Template_Tags/get_posts
			$args = array(
				'post_type' => 'vacancies',
				'numberposts' => '-1',
				'orderby' => 'title',
				'order' => 'ASC',
				'suppress_filters' => true
			);
			//$posts = get_posts( 'post_type=vacancies&numberposts=-1' );	 
			$posts = get_posts($args);	 
			$choices = array();
			foreach ( $posts as $post ) {
				$department = get_post_field("department", $post->ID);
				$departmentName = $department[0];
				// Both the 'text' and the 'value' contain the vacancy name and department, divided by "---".
				// We tried to hide the department from the 'text' (displayed in frontend) but it did not work flawless.
				// In some cases the 'value' was not shown in the entry and it was not compatible with Hubspot.
				// The current solution may need iteration, since names are getting long, especially an issue on mobile
				$choices[] = array( 'text' => $post->post_title . " | " . $departmentName, 'value' => $post->post_title . " | " . $departmentNames);
			}	 
			// update 'Select a Post' to whatever you'd like the instructive option to be
			$field->placeholder = 'Select a Vacancy...';
			$field->choices = $choices;	 
		}	 
		return $form;
	}