Read and auto populate fields in WordPress Gravity forms with jQuery

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.

What are we doing in the above snippet? Well we want to load the jQuery code once the entire page is done loading, so we use the bind load function and wrap everything within that. Next we create a custom function called check that checks the input ID’s value attribute. If its empty, then return with a timer that triggers its own function after 1,000 milliseconds. This is important because the function will keep triggering itself until a value is found (which is when the person enters the field).

Once the value is entered, the first if-condition of checking if the value is empty will fail, causing the code in the subsequent else-statement to run. This simply declares a variable field_value and assigns the value attribute to it. We are also converting whatever value was entered to lower case. This is because its much more accurate to conduct string / pattern matching when we sanitize the input.

Check the input value and manipulate another input field

The final part of this exercise is to implement whatever logic you want to determine what to inject in the other input field. In our case, we wanted to auto select a field in a drop-down box just below the input field entered. When someone enters their location in the field, depending on their City entered, it would select one of two options in a drop-down box.

It seems like there might be a lot going on in the above snippet of code, but there really isn’t. We defined an array of cities in Eastern Ontario that we want to match. Then we have the same code illustrated earlier in this post which pulls the value entered in the input field, which is then converted to lower case.

Then we parse through the array (force it to be lower case as well), and see if there is a match to the value thats entered. If there’s a match, then we force the value of another input field (in this case #input_2_4).

If there was a match, the value will be set to “Eastern Ontario”, if not it will be set to “Other”. This particular input field is a drop-down box so it would simply be matching those pre-populated values in the drop-down.

That’s it basically! Some simple jQuery to make your form more interactive, intelligence and efficient. The more time you save your end-user from filling out fields, the more likely they will be to actually finish entering and submit the form! 🙂