Hello!
When designing and implementing Gravity forms there may be occasions where you would want to auto populate multiple fields based on a preceding field selection. This was the case in our scenario where we wanted to populate the selection of a drop-down box based on a Google Map location field within Gravity Forms on WordPress.
What we wanted was for the person to enter their location in a Google Map location field (within gravity forms) and based on that selection, read the respective City within that location and based on that selection, populate a drop-down box. Gravity forms already possesses the ability to implement conditional logic, however it largely is designed for the purpose of revealing/hiding/activating input elements based on preceding choices. We need to actually inject an input selection
I’ll try to walk through the process to implementing this type of logic specifically with Gravity Forms.
Get the Gravity Form field ID that you want to capture with jQuery
Lets say that you want to capture the value of an input field. Before we go into the jQuery to accomplish that, we need to be able to identify which field we want to capture.
There’s two ways to grab the ID. The first way you can edit the Gravity form in question and look at the field ID. If your form ID is “2” and your field id is “6”, then the input id is “#input_2_6”.
The other way is to simply inspect element of the input field and look at the ID of said field.
Use jQuery to capture the value of the input field after someone has entered the value
Grabbing the value of an input field is relatively straightforward. But what about waiting until someone enters the value? You have to be able to let jQuery “discover” the field value after it has been entered.
What we want to do is load a few lines of jQuery on the page where the form is located. This can be done in WordPress or by implementing a custom page template in the wordpress theme and then assigning it to this page.